Propiedad CSS border-left
El shorthand CSS border-left define el ancho, estilo y color del borde izquierdo de un elemento en una sola declaración, con ejemplos y valores.
La propiedad CSS border-left establece el ancho, el estilo de línea y el color del borde izquierdo de un elemento en una sola declaración.
Es un shorthand de estas tres propiedades individuales:
- border-left-width — qué tan grueso es el borde (por ejemplo,
2px,thin,medium,thick). - border-left-style — el estilo de línea (por ejemplo,
solid,dotted,dashed,double,ridge). - border-left-color — el color de la línea.
Por qué usar border-left
Usa border-left cuando solo quieras un borde en el lado izquierdo de un elemento y no en los cuatro lados. Es un patrón habitual para citas en bloque, barras laterales, indicadores de navegación y cajas de "llamada" donde una única línea de acento marca el lado izquierdo de un bloque. Al ser un shorthand, es más corto que escribir las tres propiedades individuales por separado, y además restablece al valor predeterminado cualquier valor que se omita.
Cómo funcionan los valores
Los tres valores pueden escribirse en cualquier orden, y uno o dos de ellos pueden omitirse:
- Si omites el color, el borde usa la propiedad color del elemento, es decir, el mismo color que su texto (la palabra clave CSS universal
currentColor). - Si omites el ancho, su valor predeterminado es
medium(aproximadamente 3–4px, según el navegador). - Si omites el estilo, su valor predeterminado es
none, lo que significa que no se dibuja ningún borde — así que una declaración comoborder-left: 5px blue;no muestra nada. El estilo es el valor que casi siempre es necesario incluir.
| Valor inicial | medium none currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No |
| Animatable | Sí. El color y el ancho del borde son animables. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderLeft = "1px solid black"; |
Sintaxis
Sintaxis de border-left
border-left: border-width border-style border-color | initial | inherit;Ejemplo de la propiedad border-left:
Ejemplo de la propiedad CSS border-left con valor solid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-left: 3px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-left example</h2>
<div> This is a simple example for the border-left property.</div>
</body>
</html>Resultado
Ejemplo de la propiedad border-left aplicada a distintos elementos:
Ejemplo de la propiedad CSS border-left con valores dotted, double y solid
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-left: 5px solid #8ebf42;
}
p {
border-left: 4px dotted #1c87c9;
}
div {
border-left: thick double #666;
}
</style>
</head>
<body>
<h1>A heading with a solid green left border</h1>
<p>A heading with a dotted blue left border.</p>
<div>A div element with a thick double left border.</div>
</body>
</html>En el siguiente ejemplo, se crea una caja con el elemento <div>, con un background-color aplicado a la caja y un borde izquierdo de tipo ridge. Ten en cuenta que los estilos ridge, groove, inset y outset derivan su sombreado 3D del color del borde, por lo que se ven mejor sobre un fondo de contraste.
Ejemplo de la propiedad border-left con el elemento <div>:
Ejemplo de la propiedad CSS border-left con valor ridge
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-left: 20px ridge #8ebf42;
background-color: #ccc;
height: 100px;
width: 200px;
font-weight: bold;
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<div>
<p>This box has a ridge border on the left side.</p>
</div>
</body>
</html>Nota sobre la propiedad lógica
border-left es una propiedad física — siempre apunta al borde izquierdo independientemente de la dirección de escritura del texto. Si quieres que el borde siga el inicio del texto (el borde izquierdo en idiomas de izquierda a derecha, el borde derecho en idiomas de derecha a izquierda), usa en su lugar la propiedad lógica border-inline-start. Para la mayoría de los diseños en inglés de izquierda a derecha, ambas se comportan igual, pero las propiedades lógicas hacen que un diseño se adapte automáticamente cuando cambia la dirección.
Valores
El shorthand border-left acepta los valores de sus tres propiedades individuales, más las palabras clave CSS universales:
| Valor | Descripción |
|---|---|
| border-left-width | Establece el ancho del borde izquierdo de un elemento. El valor predeterminado es "medium". Valor obligatorio. |
| border-left-style | Establece el estilo de línea del borde izquierdo de un elemento. El valor predeterminado es "none". Valor obligatorio. |
| border-left-color | Establece el color del borde izquierdo de un elemento. El valor predeterminado es el color actual del texto. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |