W3docs
es
Iniciar sesión

Propiedad CSS border-left-color

La propiedad border-left-color define el color del borde izquierdo de un elemento. Consulta todos los valores con ejemplos.

La propiedad CSS border-left-color establece el color del borde izquierdo de un elemento. Solo controla el color — el borde también necesita un estilo y un ancho para ser visible.

Esta página cubre la sintaxis de border-left-color, por qué se requiere un estilo de borde para que se muestre, y ejemplos prácticos para cada tipo de valor de color (colores nombrados, hex, RGB, HSL y transparent).

Por qué se requiere un estilo de borde

Un borde tiene tres componentes: estilo, ancho y color. Por defecto, el estilo de borde es none, lo que significa que el navegador no dibuja ningún borde — así que establecer solo border-left-color no produce nada visible.

Para que aparezca el borde izquierdo, establece primero un estilo con border-style o border-left-style, y luego aplica el color:

.box {
  border-left-style: solid; /* required, otherwise the border is invisible */
  border-left-width: 4px;   /* optional; defaults to medium */
  border-left-color: #1c87c9;
}

Si también deseas colorear los bordes superior, derecho e inferior, la abreviatura border-color establece los cuatro lados a la vez. El ancho se controla por separado con border-width o border-left-width (el ancho predeterminado es medium).

El valor inicial es currentColor, lo que significa que, hasta que establezcas un color, el borde toma el valor color del propio elemento.

Resumen de la propiedad

Valor inicialcurrentColor
Se aplica aTodos los elementos. También se aplica a ::first-letter.
HeredableNo
AnimableSí. El color del borde izquierdo es animable.
VersiónCSS1
Sintaxis DOMobject.style.borderLeft = "1px solid black";

Sintaxis

border-left-color: color | transparent | initial | inherit;

Ejemplos

Colorear el borde izquierdo de forma diferente a los demás

Este ejemplo dibuja un borde sólido en todos los lados con border-color, y luego sobreescribe solo el lado izquierdo para que destaque:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        padding: 20px;
        border-style: solid;
        border-color: #666;
        border-left-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Border-left-color example</h2>
    <div>Example for the border-left-color property with different left border color.</div>
  </body>
</html>
Pruébalo tú mismo »

Resultado:

Ejemplo de la propiedad CSS border-left-color que muestra una caja con un borde izquierdo azul

Usar el valor "transparent"

Un borde izquierdo transparent es invisible pero sigue ocupando el espacio definido por el ancho del borde. Esto es útil para mantener los diseños alineados o para crear efectos visibles al pasar el cursor:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        padding: 3px;
        text-align: center;
        border: 15px ridge #8ebf42;
        border-left-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a transparent left border</h2>
  </body>
</html>
Pruébalo tú mismo »
Información

Puedes establecer el color como un color nombrado, un código hexadecimal, o un valor rgb(), rgba(), hsl() o hsla(). Los ejemplos a continuación muestran los formatos más comunes.

Valor de color nombrado

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a named color value.</div>
  </body>
</html>
Pruébalo tú mismo »

Valor hexadecimal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a hexadecimal value.</div>
  </body>
</html>
Pruébalo tú mismo »

Valor RGB

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a RGB value.</div>
  </body>
</html>
Pruébalo tú mismo »

Valor HSL

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 3px;
        border-left-style: solid;
        border-left-color: hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <div>Border-left-color property with a HSL value.</div>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValorDescripciónPruébalo
colorDefine el color del borde izquierdo. El color predeterminado es el color del elemento actual. Se pueden usar nombres de color, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla(). Valor obligatorio.Pruébalo »
transparentAplica un color transparente al borde izquierdo. El borde izquierdo seguirá ocupando el espacio definido por el valor de border-width.Pruébalo »
initialEstablece la propiedad a su valor predeterminado.Pruébalo »
inheritHereda la propiedad de su elemento padre.

Propiedades relacionadas

Práctica

Práctica
¿Cuál afirmación sobre la propiedad CSS 'border-left-color' es correcta?
¿Cuál afirmación sobre la propiedad CSS 'border-left-color' es correcta?
Was this page helpful?