Propiedad CSS border-width
CSS border-width es una propiedad abreviada que permite establecer el grosor de los cuatro lados del borde de un elemento. Ver ejemplos y practicar.
La propiedad CSS border-width establece el ancho (grosor) del borde de un elemento. Es una propiedad abreviada que se aplica a los cuatro lados a la vez, y es el componente de ancho de la propiedad abreviada más amplia border.
Puedes establecer cada lado de forma independiente con las propiedades individuales:
- border-top-width define el ancho del borde superior.
- border-right-width define el ancho del borde derecho.
- border-bottom-width define el ancho del borde inferior.
- border-left-width define el ancho del borde izquierdo.
Un borde solo se pinta cuando border-style tiene un valor distinto al predeterminado none. Si estableces border-width pero no defines un estilo de borde, el borde permanecerá invisible — esta es la razón más común por la que un borde "no funciona."
Cómo la propiedad abreviada asigna valores a los lados
border-width acepta de uno a cuatro valores, y la cantidad de valores que indiques determina a qué lados se aplican:
| Valores dados | Superior | Derecho | Inferior | Izquierdo |
|---|---|---|---|---|
border-width: a | a | a | a | a |
border-width: a b | a | b | a | b |
border-width: a b c | a | b | c | b |
border-width: a b c d | a | b | c | d |
La forma de cuatro valores sigue el orden en sentido horario superior → derecho → inferior → izquierdo utilizado por todas las propiedades abreviadas de la caja CSS (el mismo orden que margin y padding).
Cada valor es un <line-width>: ya sea una longitud (px, em, rem, etc.) o una de las palabras clave thin, medium o thick. Los porcentajes no están permitidos.
| Valor inicial | medium |
|---|---|
| Heredado | No |
| Animable | Sí. El ancho del borde es animable. |
| Versión | CSS1 |
| Sintaxis JavaScript | object.style.borderWidth = "1px 5px"; |
Sintaxis
border-width: <line-width>{1,4} | initial | inherit;Un solo valor (los cuatro lados)
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 1px;
padding: 5px;
}
</style>
</head>
<body>
<p>This paragraph's border width is set to 1px.</p>
</body>
</html>Ancho diferente por lado
Aquí se comparan los tres tamaños de palabras clave lado a lado, además de una caja con cuatro valores en la que cada borde tiene un grosor diferente.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #666;
padding: 5px;
border-style: solid;
}
.thin {
border-width: 1px;
}
.medium {
border-width: medium;
}
.thick {
border-width: 10px;
}
.mixed {
/* top right bottom left */
border-width: 2px 8px 12px 24px;
}
</style>
</head>
<body>
<p class="thin">This paragraph's border width is set to 1px.</p>
<p class="medium">This paragraph's border width is set to medium.</p>
<p class="thick">This paragraph's border width is set to 10px.</p>
<p class="mixed">Each side has its own width: 2px 8px 12px 24px.</p>
</body>
</html>Resultado
Palabras clave vs. longitudes: cuándo usar cada una
- Usa una longitud (
px,em,rem) cuando necesites un grosor exacto y predecible — este es el caso más común en diseños reales. - Usa las palabras clave
thin,mediumythickcuando el número exacto de píxeles no importe y prefieras que el navegador decida. Se asignan a valores de píxeles pequeños definidos por el navegador (aproximadamente 1px, 3px y 5px en la mayoría de los navegadores, aunque la especificación no los fija). mediumes el valor inicial, por lo que un elemento conborder-style: solidy sinborder-widthya mostrará un borde de ancho medio.
Los valores negativos son inválidos y hacen que toda la declaración sea ignorada.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| medium | Define un borde de grosor medio. Este es el valor predeterminado. (Palabra clave relativa con valores en píxeles definidos por el navegador.) | Pruébalo » |
| thin | Define un borde delgado. | Pruébalo » |
| thick | Define un borde grueso. | Pruébalo » |
| length | Define el grosor del borde. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |