| Definición | Establece algunas o todas las propiedades del borde inferior 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-bottom |
Ejemplos de uso
La propiedad border-bottom 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.
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-bottom es el de establecer simultáneamente el grosor, estilo y color del borde inferior de un elemento:
Aunque suele ser común utilizar el orden "grosor, estilo y color", la propiedad border-bottom permite indicar las propiedades en cualquier orden:
La propiedad border-bottom no requiere que se indiquen las tres propiedades que definen el estilo del borde inferior. 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-bottom es mucho más utilizada que border-bottom-width, border-bottom-color y border-bottom-style, ya que permite definir el aspecto del borde inferior de un elemento de forma fácil y concisa.