| Definición | Establece 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 inicial | Cada propiedad define su propio valor por defecto |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | no |
| 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:
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:
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:
En el siguiente ejemplo se omite el grosor del borde, por lo que el navegador le asigna automáticamente el valor medium:
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:
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:
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: