Propiedad CSS border-left-width
La propiedad border-left-width define el ancho del borde izquierdo de un elemento. Consulta todos los valores con ejemplos y practica tú mismo.
La propiedad CSS border-left-width define el ancho (grosor) del borde izquierdo de un elemento. Es la contraparte de un solo lado de border-width, y te permite controlar únicamente el borde izquierdo sin afectar los bordes superior, derecho o inferior.
El ancho del borde izquierdo — al igual que el de los demás lados — también puede establecerse con las propiedades abreviadas border o border-width. Usa border-left-width cuando necesites estilizar únicamente el borde izquierdo, un patrón habitual en barras laterales, citas en bloque y franjas decorativas a lo largo del lateral de un elemento.
Por qué el borde debe existir primero
El ancho de un borde no tiene efecto visible por sí solo. El navegador solo pinta un borde cuando se establece un border-style (el estilo predeterminado es none), por lo que una declaración como border-left-width: thick; no hace nada hasta que también definas un estilo. Establécelo con border-left-style o con la propiedad abreviada border-style:
/* width alone — nothing renders, because the style is still `none` */
.box {
border-left-width: thick;
}
/* correct — a style is present, so the 5px left border is painted */
.box {
border-left-style: solid;
border-left-width: 5px;
border-left-color: teal;
}Lo mismo aplica al color: si omites border-left-color, el borde utilizará el currentColor del elemento (su color de texto).
La especificación no define el grosor exacto de cada palabra clave. Sin embargo, siempre siguen este orden: thin ≤ medium ≤ thick.
La especificación no define cómo se conectan los bordes de diferente ancho y estilo en las esquinas.
| Valor inicial | medium |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No |
| Animable | Sí. El ancho del borde es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderLeftWidth = "4px"; |
Sintaxis
Sintaxis de la propiedad CSS border-left-width
border-left-width: medium | thin | thick | length | initial | inherit;Ejemplo de la propiedad border-left-width con el valor "thick":
Ejemplo de la propiedad CSS border-left-width con el valor thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 10px;
border-style: dashed;
border-left-width: thick;
}
</style>
</head>
<body>
<h2>Border-left-width example</h2>
<p>As you can see the width of the left border is set to thick.</p>
</body>
</html>Ejemplo de la propiedad border-left-width con todos los valores:
Ejemplo de la propiedad CSS border-left-width con los valores medium, thin, thick, px, initial e inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc;
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;
border: solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-left-width example classes */
.b1 {
border-left-width: medium;
}
.b2 {
border-left-width: thin;
}
.b3 {
border-left-width: thick;
}
.b4 {
border-left-width: 10px;
}
.b5 {
border-left-width: initial;
}
.b6 {
border-left-width: inherit;
}
</style>
</head>
<body>
<h1>Border-left-width value examples</h1>
<main class="flex-center">
<div class="b1">
medium
</div>
<div class="b2">
thin
</div>
<div class="b3">
thick
</div>
</main>
<main class="flex-center">
<div class="b4">
10px length
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Resultado
![Propiedad CSS border-left-width](/uploads/media/default/0001/03/6406dd863a4db0df218023217fcf17f182a53660.png "CSS border-left-width Property" =420x)
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| medium | Define un borde izquierdo medio. Es el valor predeterminado de esta propiedad. | Pruébalo » |
| thin | Define un borde izquierdo delgado. El agente de usuario determina el ancho exacto. | Pruébalo » |
| thick | Define un borde izquierdo grueso. El agente de usuario determina el ancho exacto. | Pruébalo » |
| length | Define el grosor del borde izquierdo. Por ejemplo, 10px, 5em, 8pt, etc. | Pruébalo » |
| initial | Establece la propiedad a su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Los porcentajes no están permitidos para los anchos de borde — border-left-width: 50% es inválido y la declaración se ignora. Usa una longitud fija (px, em, rem) o una de las palabras clave.
Cosas a tener en cuenta
- Se requiere un estilo. El ancho y el color no tienen efecto hasta que border-style se establece en algo distinto de
none. - El grosor de las palabras clave lo define el navegador.
thin,mediumythickno tienen valores en píxeles fijos en la especificación; solo garantizan el ordenthin ≤ medium ≤ thick. Para diseños de píxel perfecto, usa una longitud explícita. - Afecta al diseño. El ancho del borde se suma al tamaño renderizado del elemento, a menos que box-sizing esté establecido en
border-box, en cuyo caso el borde se dibuja dentro del ancho declarado. - Animable. El valor puede transicionarse y animarse, lo que hace que
border-left-widthsea muy útil para efectos de franja al pasar el ratón.
Propiedades relacionadas
- border-left-style y border-left-color — las otras dos partes del borde izquierdo.
- border-left — la propiedad abreviada para el ancho, estilo y color del lado izquierdo en una sola declaración.
- border-right-width, border-top-width, border-bottom-width — el mismo control para los demás lados.