Propiedad border-bottom

DefiniciónEstablece algunas o todas las propiedades del borde inferior 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-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:

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

Aunque suele ser común utilizar el orden "grosor, estilo y color", la propiedad border-bottom permite indicar las propiedades en cualquier orden:

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

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:

div { border-bottom: 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-bottom: 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-bottom: 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-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.