Propiedad CSS border-bottom-style
La propiedad CSS border-bottom-style se utiliza para especificar el estilo del borde inferior del elemento.
La propiedad border-bottom-style no será visible a menos que también se especifiquen border-bottom-width y border-bottom-color (o el atajo border-bottom/border).
INFO
Debes saber que la especificación no define cómo se conectan los bordes de diferentes estilos en las esquinas.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderBottomStyle = "dotted"; |
Sintaxis
Sintaxis de la propiedad CSS border-bottom-style
border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Ejemplo de la propiedad border-bottom-style:
Ejemplo de la propiedad CSS border-bottom-style con valores solid y dashed
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
border-bottom-style: solid;
}
div {
border-bottom-style: dashed;
}
</style>
</head>
<body>
<h2>A heading with a solid bottom border</h2>
<div>A div element with a dashed bottom border.</div>
</body>
</html>Resultado
Ejemplo de la propiedad border-bottom-style con múltiples valores:
Ejemplo de la propiedad CSS border-bottom-style con valores double, dashed y groove
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
border-bottom-style: double;
}
p {
border-style: solid;
border-bottom-style: dashed;
}
div {
border-bottom-style: groove;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>A heading with a double bottom border</h2>
<p> A paragraph with a dashed bottom border. </p>
<div>A div element with a groove bottom border.</div>
</body>
</html>Ejemplo de la propiedad border-bottom-style con el valor "hidden":
Ejemplo de la propiedad border-bottom-style con el valor "hidden":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
text-align: center;
border: 5px solid black;
border-bottom-style: hidden;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Ejemplo de la propiedad border-bottom-style con el valor "inset":
Ejemplo de la propiedad border-bottom-style con el valor "inset":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
text-align: center;
border: 5px solid;
border-bottom-style: inset;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Ejemplo de la propiedad border-bottom-style con el valor "outset":
Ejemplo de la propiedad border-bottom-style con el valor "outset":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
text-align: center;
border: 5px solid;
border-bottom-style: outset;
}
</style>
</head>
<body>
<h1>Examples with border-bottom-style property</h1>
</body>
</html>Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| none | No muestra ningún borde. Valor predeterminado. | Probarlo » |
| hidden | Igual que "none", excepto en la resolución de conflictos de bordes para elementos de tabla. | Probarlo » |
| dotted | El borde se especifica como una serie de puntos. | Probarlo » |
| dashed | El borde se especifica como una serie de guiones. | Probarlo » |
| solid | El borde se especifica como una línea sólida. | Probarlo » |
| double | El borde se especifica como dos líneas sólidas. | Probarlo » |
| groove | Es un borde en 3D con efecto de surco y da la impresión de que el borde está tallado. Opuesto a ridge. | Probarlo » |
| ridge | Especifica un borde en 3D con efecto de cresta y da la impresión de un aspecto extruido. Opuesto a groove. | Probarlo » |
| inset | Es un efecto 3D que da la impresión de que el elemento aparece incrustado. Opuesto a outset. | Probarlo » |
| outset | Es un efecto 3D que da la impresión de que el elemento aparece en relieve. Opuesto a inset. | Probarlo » |
| initial | Establece la propiedad en su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles de los siguientes son valores válidos para la propiedad border-bottom-style en CSS?