border

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Propiedades Constitutivas

Esta es una propiedad abreviada para las siguientes propiedades CSS:

  • border-color
  • border-style
  • border-width

Resumen

La propiedad border permite definir en una única regla todos los bordes de los elementos seleccionados. Se puede utilizar border para definir el o los valores siguientes: border-width, border-style, border-color.

Sintaxis

border: [border-width || border-style || border-color | inherit] ;

Valores

Ejemplos

Ver ejemplo en vivo

element {
    border: 1px solid #000;
}

Notas importantes

Mientras que las propiedades border-width, border-style y border-color admiten hasta cuatro valores diferentes, ésta (border) no acepta más de uno por cada propiedad.

Especificaciones

Specification
CSS Backgrounds and Borders Module Level 3
# propdef-border

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

Descripción

Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a border-image no puede ser realizada mediante el uso de border, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a none.

La propiedad abreviada border es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) border-width, border-style y border-color puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. border-top) y lógicas (p. ej. border-block-start) del borde.

Bordes vs. contornos

Los bordes y los contornos son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma:

  • Los contornos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento.
  • De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares, no necesitan serlo.