Característica border-bottom en CSS

Característica border-bottom en CSS

Una propiedad border-bottom en CSS es una propiedad abreviada que establece los valores de los atributos border-bottom-color, border-bottom-styleborder-bottom-width. Estos atributos describen cómo se muestra el marco border inferior del elemento.

Funciones border-bottom css

Valor inicialPara cada valor corto: border-bottom-widthmedium border-bottom-stylenone border-bottom-colorcurrentcolor
Aplicado aTodos los artículos.
HeredableNo
Móvil
Valor calculadoPara cada valor corto:
border-bottom-width: longitud absoluta, o 0 si la propiedad se establece 
border-bottom-style: en nonehidden.
border-bottom-color: color calculado.
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

Al igual que con todas las propiedades de acceso directo, la propiedad border-bottom establece los valores de todas las propiedades que puede establecer, incluso si no especificamos un valor para esas propiedades, porque las establecerá en sus valores iniciales, lo que significa que el código:

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

Eventualmente se verá así:

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

Tenga en cuenta que el valor de propiedad border-bottom-style especificado antes de la propiedad border-bottom se ignorará. Debido a que el valor inicial de la propiedad border-bottom-style es none, las reglas anteriores no mostrarán un marco.

Ejemplos y aplicaciones

En el siguiente ejemplo, estableceremos un marco inferior para los elementos que son verdes <div>border-bottom-color), ancho ( border-bottom-width) iguales 4pxborder-bottom-style punteados ( ). 

Código HTML:

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

Código CSS:

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

Soporte de navegadores

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

Características generales

Esta propiedad acorta tres propiedades, cuyos valores se pueden especificar en cualquier orden, y se pueden omitir uno o dos de esos valores.

<br-width>

Vea la página de características border-bottom-width.

<br-style>

Vea la página de características border-bottom-style.

<color>

Vea la página de características border-bottom-color.

Estructura

border-bottom: <br-width> || <br-style> || <color>;

Los valores se pueden colocar en el orden que desee.

<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

Vea también

  • La página de propiedades establecido por la propiedad de acceso directo border-bottomborder-bottom-widthborder-bottom-styleborder-bottom-color.
  • La página de propiedades establecido por la propiedad de acceso directo borderborder-widthborder-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.