
Una propiedad border-bottom en CSS es una propiedad abreviada que establece los valores de los atributos border-bottom-color
, border-bottom-style
y border-bottom-width
. Estos atributos describen cómo se muestra el marco border
inferior del elemento.
Funciones border-bottom css
Valor inicial | Para cada valor corto: border-bottom-width : medium border-bottom-style : none border-bottom-color : currentcolor |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Móvil | Sí |
Valor calculado | Para cada valor corto: border-bottom-width : longitud absoluta, o 0 si la propiedad se establece border-bottom-style : en none o hidden .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 4px
y border-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ística | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 4 | 3,5 | 1.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-bottom
:border-bottom-width
,border-bottom-style
yborder-bottom-color
. - La página de propiedades establecido por la propiedad de acceso directo
border
:border-width
,border-style
, yborder-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
.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS