Propiedad CSS border-left-style

La propiedad CSS border-left-style establece el estilo del borde izquierdo de un elemento. Acepta una única palabra clave elegida del mismo conjunto de valores disponibles para el shorthand border-style. A diferencia de border-style, que establece el estilo de los cuatro lados a la vez, border-left-style apunta únicamente al borde izquierdo.

Esta propiedad se complementa con border-left-width y border-left-color, o puedes establecer los tres a la vez con el shorthand border-left. Un borde solo es visible cuando su estilo se establece en algo distinto al valor predeterminado none — incluso un ancho generoso y un color llamativo no muestran nada hasta que se aplica un estilo.

El ancho predeterminado del borde izquierdo es medium. Ajústalo con la propiedad border-left-width o border-width.

No todos los navegadores renderizan el mismo estilo de manera idéntica. Chrome, por ejemplo, dibuja los puntos de un borde dotted como pequeños cuadrados en lugar de círculos, y los valores 3D (groove, ridge, inset, outset) dependen del color del borde para producir su efecto de luz y sombra.

Información

La especificación no define la cantidad de espacio entre los puntos ni entre los guiones.

Información

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. También se aplica a ::first-letter.
Heredado	No
Animatable	No
Versión	CSS1
Sintaxis DOM	object.style.borderLeftStyle = "solid";

Sintaxis

Sintaxis de la propiedad CSS border-left-style

border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Ejemplo de la propiedad border-left-style:

Ejemplo de la propiedad CSS border-left-style con los valores solid y dotted

<!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>

Pruébalo tú mismo »

Información

Dependiendo del valor de border-color, los efectos de los valores groove, ridge, inset y outset pueden cambiar.

Ejemplo de la propiedad border-left-style con todos los valores:

Ejemplo de la propiedad CSS border-left-style con los valores hidden, dotted, dashed, solid, double, groove, ridge, inset y outset

<!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>

Pruébalo tú mismo »

Resultado

Valores

Valor	Descripción	Pruébalo
none	Define que no habrá ningún borde. Valor predeterminado.
hidden	Igual que `none`, excepto en la resolución de conflictos de bordes en elementos de tabla, donde elimina completamente el borde izquierdo del renderizado.
dotted	Define un borde de puntos.
dashed	Define un borde de guiones.
double	Define un borde doble.
solid	Define un borde sólido.
groove	Define un borde acanalado 3D. Su efecto puede cambiar con el valor de border-color.
ridge	Define un borde en relieve 3D. Su efecto puede cambiar con el valor de border-color.
inset	Define un borde insertado 3D. Su efecto puede cambiar con el valor de border-color.
outset	Define un borde saliente 3D. Su efecto puede cambiar con el valor de border-color.
initial	Establece la propiedad a su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Cuándo usarla

Usa border-left-style cuando quieras un acento estilizado únicamente en el borde izquierdo — un patrón habitual en blockquotes, tarjetas de aviso y elementos activos en barras laterales, donde una barra de color simple marca el elemento sin enmarcarlo completamente. Para el mismo efecto en otros lados, usa border-top-style, border-right-style o border-bottom-style. Cuando los cuatro bordes comparten el mismo estilo, el shorthand border-style es más conciso.

Práctica

¿Qué valores puede tomar la propiedad 'border-left-style' en CSS?