Característica border-bottom-width en CSS

por
Característica border-bottom-width en CSS

La propiedad border-bottom-width CSS establece el ancho del marco inferior de un elemento.

Funciones border-bottom-width css

Valor inicialmedium
Aplicado aTodos los artículos.
HeredableNo
MóvilSí
Valor calculadoLongitud absoluta, o 0 si la propiedad se establece border-bottom-style en noneo hidden.
/* palabras clave */ 
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
/* <length> longitud */ 
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;
/* valores globales */ 
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;

Ejemplos y aplicaciones

En el siguiente ejemplo, estableceremos un marco para los elementos que son de <div> color (border-bottom-color) rojo, ancho (border-bottom-width) igual 4pxy border-bottom-style punteado ( ). 

Código HTML:

< div > Este elemento tiene un marco en su borde inferior </ div >

Código CSS:

div {
  border-bottom-style: dotted;
  border-bottom-width: 4px;
  border-bottom-color: green;
  padding: 0.5em;
}

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico1.01.04.03,51.0

Características generales

<br-width>

Este valor define el ancho del marco, ya sea una longitud <length> no negativa o una palabra reservada. Se pueden utilizar las siguientes palabras reservadas:

thinmarco delgado
mediummarco mediano
thickmarco grueso

Nota: Debido a que la especificación no especifica cuál es el valor exacto asociado con cada palabra reservada, el resultado puede variar según el navegador, pero no obstante, estos valores seguirán la relación thin ≤ medium ≤ thick y los valores serán consistentes entre sí en el documento.

Estructura

border-bottom-width: <br-width>;

dónde:

<br-width> = <length> | thin | medium | thick

Vea también

  • La página de propiedades establecida por la propiedad de acceso directo border-bottom: border-bottom-color y border-bottom-style.
  • La página de propiedades establecido por la propiedad de acceso directo border: border-width, border-style, y border-color.
  • Configure una imagen para el marco usando la función border-image.
  • Esquinas redondeadas y border-radius esquinas inferiores, border-bottom-left-radius, border-bottom-right-radius