Referencia de CSS

Propiedad border

DefiniciónEstablece algunas o todas las propiedades de todos los bordes de los elementos
Valores
permitidos
Alguno o todos los siguientes valores y en cualquier orden:
Valor inicialCada propiedad define su propio valor por defecto
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredano
Definición en
el estándar
w3.org/TR/CSS21/box.html#propdef-border

Ejemplos de uso

La propiedad border es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. En este caso, se trata de una de las propiedades shorthand más completas, ya que permite establecer hasta 12 propiedades de forma simultánea.

La propiedad border se utiliza para establecer el mismo grosor, estilo y/o anchura de todos los bordes de un elemento. Al contrario que las propiedades margin y padding, con la propiedad border no es posible indicar diferentes valores para cada uno de los cuatro bordes.

Como se trata de una de las propiedades más flexibles de CSS, su definición parece complicada, sobre todo en lo que se refiere a los valores permitidos "alguno o todos los siguientes valores y en cualquier orden").

El uso más habitual de border es el de establecer simultáneamente el grosor, estilo y color del borde de un elemento:

div { border: 1px solid #C00; }
div { border: medium double #369; }

En el siguiente ejemplo, se muestran tres formas diferentes de establecer el mismo borde a un elemento:

/* Utilizando la propiedad shorthand "border" */
div {
  border: 1px solid #C00;
}

/* Utilizando las propiedades shorthand de cada borde */
div {
  border-top: 1px solid #C00;
  border-right: 1px solid #C00;
  border-bottom: 1px solid #C00;
  border-left: 1px solid #C00;
}

/* Utilizando las propiedades simples de cada borde */
div {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #C00;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #C00;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #C00;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #C00;
}

En el mejor de los casos, la propiedad border es equivalente a 12 propiedades simples. Además, como sucede con todas las propiedades de tipo shorthand relacionadas con los bordes, el orden en el que se indican los valores es indiferente:

div { border: 1px solid #C00; }
div { border: solid 1px #C00; }
div { border: #C00 1px solid; }
div { border: #C00 solid 1px; }

La propiedad border no requiere que se indiquen las tres propiedades que definen el estilo de los bordes. Si no se indica alguna propiedad, su valor se obtiene mediante el valor por defecto de esa propiedad.

En el siguiente ejemplo sólo se indica el estilo del borde, por lo que el navegador asigna automáticamente el valor medium a su grosor y el valor black a su color:

div { border: solid; }

En el siguiente ejemplo se omite el grosor del borde, por lo que el navegador le asigna automáticamente el valor medium:

div { border: solid blue; }

No obstante, como el valor por defecto del estilo de un borde es none, si no se indica explícitamente el estilo del borde, el resultado es que el navegador no muestra ese borde:

div { border: 2px blue; }

El grosor del borde se puede establecer de cualquiera de las diferentes formas de indicar una medida en CSS. El color también se puede establecer de alguna de las diferentes formas de indicar un color en CSS. Por último, el estilo del borde sólo puede ser alguno de los valores que se incluyen en la siguiente tabla:

Valor Descripción
none No se muestra ningún borde. Como se trata del valor por defecto de cada uno de los bordes, ningún elemento muestra un borde a menos que se establezca de forma explícita
hidden Visualmente es idéntico a none, ya que provoca que no se muestre ningún borde. Su única diferencia es la forma en la que el navegador resuelve los conflictos entre bordes adyacentes de las celdas de las tablas
dotted Borde punteado, formado por una serie de puntos separados por espacios
dashed Borde discontinuo, formado por una serie de pequeños trazos intercalados por espacios
solid Borde continuo, formado por una línea recta continua
double Borde doble, formado por dos líneas rectas continuas separadas entre sí por un espacio en blanco
groove Borde hundido, que visualmente parece que se encuentra por debajo del nivel de la superficie de la pantalla
ridge Borde saliente, que visualmente parece que se encuentra por encima del nivel de la superficie de la pantalla
inset Borde hundido, que provoca que el elemento que encierra parezca que se encuentra por debajo del nivel de la superficie de la pantalla
outset Borde saliente, que provoca que el elemento que encierra parezca que se encuentra por encima del nivel de la superficie de la pantalla

Puedes ver ejemplos del aspecto de todos los estilos de borde en la definición de la propiedad border-style.

La propiedad border es mucho más utilizada que las propiedades individuales de cada borde, ya que permite definir el aspecto del borde de un elemento de forma fácil y concisa.

El único inconveniente de esta propiedad es que asigna los mismos valores a los cuatro bordes de un elemento, por lo que parece que si uno de ellos no es idéntico a los demás, no se puede utilizar la propiedad border. No obstante, aprovechando el comportamiento de CSS, también se puede utilizar la propiedad border cuando alguno de los bordes es diferente.

En el siguiente ejemplo, tres de los bordes son idénticos (1px solid blue) pero el elemento no debe mostrar un borde inferior. La forma más rápida de conseguirlo es utilizar dos de las propiedades shorthand de los bordes:

div { border: 1px solid blue; border-bottom: none; }

De la misma forma, es posible asignar el mismo aspecto a los cuatro bordes y después utilizar alguna propiedad simple para cambiar algún grosor, estilo o color de algún borde:

div { border: 1px solid blue; border-bottom-color: red; }
div { border: 3px red; border-style: solid double; }
div { border: double; border-color: red blue green black; }