Propiedad CSS border-style
Esta propiedad CSS permite definir el estilo de los cuatro lados del borde. Aprende sobre sus valores y consulta ejemplos.
La propiedad CSS border-style establece el estilo de línea de los cuatro lados del borde de un elemento a la vez — por ejemplo solid, dashed o dotted. Esta página explica cada valor, cómo la forma abreviada de uno a cuatro valores se asigna a cada lado, y los problemas comunes que conviene conocer antes de usar un borde.
border-style es una forma abreviada de las cuatro propiedades individuales por lado: border-top-style, border-bottom-style, border-left-style y border-right-style.
Por qué es importante
Un borde solo se vuelve visible cuando tiene un estilo. Esta es la trampa más común para los principiantes: si defines border-width y border-color pero dejas border-style en su valor predeterminado none, no se muestra nada — el navegador no reserva espacio ni traza ninguna línea. Por eso border-style es en efecto el interruptor que activa un borde. En la mayoría del código real se definen los tres atributos a la vez con la forma abreviada border (p. ej. border: 1px solid #1c87c9;), pero usar border-style directamente resulta útil cuando quieres un estilo de línea diferente por lado, o cuando cambias solo el estilo en hover/focus manteniendo el ancho fijo (lo que evita el desplazamiento del diseño).
El borde se dibuja sobre el fondo del elemento y el valor no se hereda ni es animable.
Cómo funciona la forma abreviada de uno a cuatro valores
border-style acepta de uno a cuatro valores, por lo que cada lado puede tener su propio estilo:
- Un valor — se aplica a los cuatro lados.
- Dos valores — el primero es arriba y abajo; el segundo es izquierda y derecha.
- Tres valores — el primero es arriba; el segundo es izquierda y derecha; el tercero es abajo.
- Cuatro valores — arriba, derecha, abajo, izquierda, en orden horario (un mnemónico útil: TRouBLe).
Una nota rápida sobre compatibilidad de navegadores: todos los navegadores modernos admiten todos los valores descritos a continuación. Los estilos 3D (groove, ridge, inset, outset) renderizan su efecto a partir del border-color, por lo que resultan sutiles con colores claros y desaparecen por completo cuando el color es black o muy oscuro.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderStyle = "dotted double"; |
Sintaxis
Sintaxis de la propiedad CSS border-style
border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;Ejemplo de la propiedad border-style:
Ejemplo de la propiedad CSS border-style con el valor dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-style: dotted;
padding: 5px;
}
</style>
</head>
<body>
<p> Example of dotted border-style.</p>
</body>
</html>Ejemplo de la propiedad border-style donde cada lado tiene su propio valor:
Ejemplo de la propiedad CSS border-style con los valores double, solid, dashed y dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border-width: 4px;
border-style: double solid dashed dotted;
border-color: #1c87c9;
color: #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<p>Example, where each side has own value.</p>
</body>
</html>Resultado
Ejemplo de la propiedad border-style con todos los valores:
Ejemplo de la propiedad CSS border-style con los valores hidden, double, solid, dashed, dotted, groove, ridge, inset y outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #eee;
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;
background-color: #c9c5c5;
border: 8px solid #1c87c9;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-style example classes */
.b1 {
border-style: hidden;
}
.b2 {
border-style: dotted;
}
.b3 {
border-style: dashed;
}
.b4 {
border-style: solid;
}
.b5 {
border-style: double;
}
.b6 {
border-style: groove;
}
.b7 {
border-style: ridge;
}
.b8 {
border-style: inset;
}
.b9 {
border-style: outset;
}
</style>
</head>
<body>
<h1>Border-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| none | No muestra ningún borde. Valor predeterminado. | Pruébalo » |
| hidden | Igual que "none", excepto en la resolución de conflictos de bordes en elementos de tabla. | Pruébalo » |
| dotted | El borde se especifica como una serie de puntos. | Pruébalo » |
| dashed | El borde se especifica como una serie de guiones. | Pruébalo » |
| solid | El borde se especifica como líneas sólidas. | Pruébalo » |
| double | El borde se especifica como líneas sólidas dobles. | Pruébalo » |
| groove | Es un borde acanalado 3D que da la impresión de que el borde está tallado. Opuesto a ridge. | Pruébalo » |
| ridge | Especifica un borde con relieve 3D que da la impresión de apariencia extruida. Opuesto a groove. | Pruébalo » |
| inset | Es un efecto 3D que da la impresión de que el elemento aparece incrustado. Opuesto a outset. | Pruébalo » |
| outset | Es un efecto 3D que da la impresión de que el elemento aparece en relieve. Opuesto a inset. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Problemas comunes
- Sin estilo no hay borde. Con
border-style: none(el valor predeterminado),border-widthyborder-colorno tienen efecto visible. Siempre define un estilo. hiddenfrente anone. Se ven idénticos en una caja normal. La diferencia solo aparece en tablas: en la resolución de conflictos de bordes,hiddengana y suprime el borde de la celda vecina, mientras quenonetiene la prioridad más baja.groove,ridge,insetyoutsetnecesitan un borde de color y de varios píxeles. Su ilusión 3D se construye a partir de tonos más claros y más oscuros delborder-color, así que usa un ancho de al menos2px–4pxy evita el negro o blanco puros.- Cambiar solo
border-stylemantiene estable el tamaño del elemento porque el ancho no cambia — útil para estados hover/focus que intercambiandashedporsolidsin desplazar el diseño.
Propiedades relacionadas
- border — define el ancho, estilo y color en una sola declaración.
- border-width y border-color — las otras dos piezas de un borde.
- border-radius — redondea las esquinas de un borde con estilo.
- outline-style — los mismos estilos de línea para los contornos (que se sitúan fuera del borde y no afectan al diseño).