Propiedad border-left de CSS
La propiedad CSS border-left se utiliza para establecer el ancho, el estilo de línea y el color del borde izquierdo de los elementos.
Es una propiedad abreviada para especificar los siguientes valores:
Estos tres valores de la propiedad abreviada pueden especificarse en cualquier orden, y uno o dos de ellos pueden omitirse.
Si no se especifica un color, el valor se tomará de la propiedad color. Si la propiedad color no está definida, tomará el color actual por defecto.
Si no se especifica el width, tomará el tamaño medio del elemento.
| Valor inicial | medium none currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No |
| Animable | 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 diferentes 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>Crea un cuadro con el elemento <div> y establece un background-color para tu cuadro y el borde izquierdo.
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>Valores
| Valor | Descripción |
|---|---|
| border-left-width | Establece el ancho del borde izquierdo de un elemento. El valor predeterminado es "medium". Valor requerido. |
| border-left-style | Establece el estilo de línea del borde izquierdo de un elemento. El valor predeterminado es "none". Valor requerido. |
| 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. |
Práctica
¿Qué hace la propiedad border-left en CSS?