Propiedad CSS border-width
La propiedad CSS border-width establece el ancho del borde de un elemento. Se aplica a los cuatro lados simultáneamente. También puedes establecer el ancho para cada lado individualmente utilizando las siguientes propiedades detalladas:
- border-top-width, que define el ancho del borde superior de un elemento.
- border-left-width, que define el ancho del borde izquierdo de un elemento.
- border-right-width, que define el ancho del borde derecho de un elemento.
- border-bottom-width, que define el ancho del borde inferior de un elemento.
INFO
La propiedad border-style tiene por defecto none. Si no especificas un estilo de borde, el ancho del borde no será visible.
Esta propiedad acepta de uno a cuatro valores. Un solo valor se aplica a los cuatro lados. Dos valores se aplican a los lados superior/inferior y izquierdo/derecho, respectivamente. Tres valores se aplican a los lados superior, izquierdo/derecho e inferior. Cuatro valores se aplican a los lados superior, derecho, inferior e izquierdo en ese orden.
| Valor inicial | medium |
|---|---|
| Heredable | No |
| Animable | Sí. El ancho del borde es animable. |
| Versión | CSS1 |
| Sintaxis JavaScript | object.style.borderWidth = "1px 5px"; |
Sintaxis
Sintaxis de la propiedad CSS border-width
border-width: <line-width>{1,4} | initial | inherit;Ejemplo de la propiedad border-width:
Ejemplo de la propiedad CSS border-width
<!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>Ejemplo de la propiedad border-width con tres valores:
Ejemplo de la propiedad CSS border-width con valores px y medium
<!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;
}
</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>
</body>
</html>Resultado
Valores
| Valor | Descripción | Probar |
|---|---|---|
| medium | Define un borde de grosor medio. Este es el valor predeterminado. (Palabra clave relativa con valores de píxeles definidos por el navegador.) | Probar » |
| thin | Define un borde fino. | Probar » |
| thick | Define un borde grueso. | Probar » |
| length | Define el grosor del borde. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Practice
¿Cuáles de los siguientes valores se pueden usar para especificar el ancho de los bordes CSS?