Propiedad CSS border-left-style
La propiedad CSS border-left-style establece el estilo del borde izquierdo de un elemento. Se define como una sola palabra clave que se selecciona entre las disponibles para la propiedad border-style. A diferencia de border-style, que establece el estilo para los cuatro lados, border-left-style establece el estilo solo para el borde izquierdo.
El ancho predeterminado del borde izquierdo es medium. Puede cambiarse con la propiedad border-left-width o border-width.
No todos los navegadores representan los estilos de la misma manera. Por ejemplo, Chrome representa los puntos como puntos rectangulares, no circulares.
INFO
La especificación no indica la cantidad de espacio entre los puntos y los guiones.
INFO
La especificación no define cómo se conectan en las esquinas los bordes de distintos estilos.
| Initial Value | none |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No |
| Animatable | No |
| Version | CSS1 |
| DOM Syntax | object.style.borderLeftStyle = "solid"; |
Syntax
Syntax of CSS border-left-style Property
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Example of the border-left-style property:
Example of CSS border-left-style Property with solid and dotted values
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-left-style: solid;
}
div {
border-left-style: dotted;
}
</style>
</head>
<body>
<p> Example with solid border-left-style.</p>
<div>Example with dotted border-left-style.</div>
</body>
</html>INFO
Depending on the value of the border-color, the effects of groove, ridge, inset and outset values can be changed.
Example of the border-left-style property with all the values:
Example of CSS border-left-style Property with hidden,dotted, dashed, solid, double, groove, ridge, inset and outset values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c9c5c5;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
background-color: #8ebf42;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-left-style example classes */
.b1 {
border-left-style: hidden;
}
.b2 {
border-left-style: dotted;
}
.b3 {
border-left-style: dashed;
}
.b4 {
border-left-style: solid;
}
.b5 {
border-left-style: double;
}
.b6 {
border-left-style: groove;
}
.b7 {
border-left-style: ridge;
}
.b8 {
border-left-style: inset;
}
.b9 {
border-left-style: outset;
}
</style>
</head>
<body>
<h1>Border-left-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Result
Values
| Value | Description | Play it |
|---|---|---|
| none | Define que no habrá ningún borde. Valor predeterminado. | |
| hidden | Igual que none, excepto en la resolución de conflictos de bordes para elementos de tabla, donde elimina por completo el borde izquierdo del renderizado. | |
| dotted | Define un borde punteado. | |
| dashed | Define un borde discontinuo. | |
| double | Define un borde doble. | |
| solid | Define un borde sólido. | |
| groove | Define un borde 3D con surco. Su efecto puede cambiarse con el valor de border-color. | |
| ridge | Define un borde 3D con arista. Su efecto puede cambiarse con el valor de border-color. | |
| inset | Define un borde 3D insertado. Su efecto puede cambiarse con el valor de border-color. | |
| outset | Define un borde 3D saliente. Su efecto puede cambiarse con el valor de border-color. | |
| initial | Establece la propiedad en su valor predeterminado. | |
| inherit | Hereda la propiedad del elemento padre. |
Practice
What values can the 'border-left-style' property in CSS take?