los border-bottomtaquigrafíaCSS propiedad establece el borde inferior de un elemento. Establece los valores de border-bottom-width, border-bottom-style y border-bottom-color.

Como con todas las propiedades de taquigrafía, border-bottom siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece aquellos que no están especificados en sus valores predeterminados. Esto significa que …

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

… es en realidad lo mismo que …

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

… y el valor de border-bottom-style dado antes border-bottom se ignora. Dado que el valor predeterminado de border-bottom-style es none, sin especificar el border-style parte no da como resultado ningún borde.

Propiedades constituyentes

Esta propiedad es una abreviatura de las siguientes propiedades CSS:

  • border-bottom-color
  • border-bottom-style
  • border-bottom-width

Sintaxis

border-bottom: 1px;border-bottom: 2px dotted;border-bottom: medium dashed blue;

Los tres valores de la propiedad abreviada se pueden especificar en cualquier orden y se pueden omitir uno o dos de ellos.

Valores

Ver border-bottom-width.
Ver border-bottom-style.
Ver border-bottom-color.

Definicion formal

Valor inicial como cada una de las propiedades de la taquigrafía:

  • border-bottom-width: medium
  • border-bottom-style: none
  • border-bottom-color: currentcolor
Se aplica a todos los elementos. También se aplica a ::first-letter.
Heredado no
Valor calculado como cada una de las propiedades de la taquigrafía:

  • border-bottom-width: la longitud absoluta o 0 si border-bottom-style es none o hidden
  • border-bottom-style: Como se especificó
  • border-bottom-color: color calculado
Tipo de animación como cada una de las propiedades de la taquigrafía:

  • border-bottom-color: un color
  • border-bottom-style: discreto
  • border-bottom-width: una longitud

Sintaxis formal

||||
where 
 = | thin | medium | thick
 = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
 = ||||  || currentcolor |






where 
 = rgb( 3[ / ]? ) | rgb( 3[ / ]? ) | rgb( #3 , ? ) | rgb( #3 , ? )
 = rgba( 3[ / ]? ) | rgba( 3[ / ]? ) | rgba( #3 , ? ) | rgba( #3 , ? )
 = hsl( [ / ]? ) | hsl( , , , ? )
 = hsla( [ / ]? ) | hsla( , , , ? )
where 
 = |
 = |

Ejemplos de

Aplicar un borde inferior

HTML

<div>
  This box has a border on the bottom side.
div>

CSS

divborder-bottom: 4px dashed blue;background-color: gold;height: 100px;width: 100px;font-weight: bold;text-align: center;

Resultados

Especificaciones

Especificación Estado Comentario
Módulo de fondos y bordes CSS, nivel 3
La definición de ‘borde inferior’ en esa especificación.		 Recomendación candidata No hay cambios directos, aunque la modificación de los valores de la border-bottom-color aplíquelo.
CSS Nivel 2 (Revisión 1)
La definición de ‘borde inferior’ en esa especificación.		 Recomendación Sin cambios significativos.
Nivel 1 de CSS
La definición de ‘borde inferior’ en esa especificación.		 Recomendación Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
border-bottom 1 12 1 4 3,5 1 1 18 4 14 1 1.0

Ver también

  • border
  • border-block
  • outline