border-bottom

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.

Resumen

La propiedad border-bottom permite de definir de una vez todas las propiedades individuales border-bottom-color, border-bottom-style, y border-bottom-width, las cuales describen el color, estilo y ancho del borde inferior de un elementos.

Sintaxis

border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit

Valores

Ejemplos

Ver El Ejemplo Vivo

element {
    border-bottom-width: 1px solid #000;
}

Notas

Si no se especifica el color del borde, este tomará el valor definido en la propiedad del color general.

Se puede especificar los tres valores en cualquier orden y se pueden omitir una o dos.

Como con todas las propiedades generales, border-bottom siempre inicia todos los valores que le pueden ser definidos aún cuando no están especificados, en este caso toma los valores por defecto.

Lo que significa que:

  border-bottom-style: dotted;
  border-bottom: thick green;

es idéntico a:

  border-bottom-style: dotted;
  border-bottom: none thick green;

y el valor de border-bottom-style dado antes de border-bottom es ignorado.

Como el valor por defecto de border-bottom-style es none, el no especificar la parte <border-style> en la propiedad general significa: sin borde.

Especificaciones

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

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-bottom

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ver también