Propiedad CSS border
La propiedad border es un atajo CSS que establece valores para los cuatro lados de un elemento. Encuentra ejemplos aquí y pruébalos tú mismo.
La propiedad CSS border es un atajo que establece border-width, border-style y border-color para los cuatro lados de un elemento en una sola declaración. No se permiten valores de anchura negativos.
Esta página cubre la sintaxis abreviada, los valores que acepta, cómo dar a cada lado una apariencia diferente y las propiedades relacionadas a las que se recurre cuando el atajo no es suficiente.
Usa el atajo border cuando quieras el mismo borde en los cuatro lados:
/* shorthand — all four sides identical */
border: 2px solid #1c87c9;
/* equivalent longhand */
border-width: 2px;
border-style: solid;
border-color: #1c87c9;Cuando los lados deben ser diferentes, establece las propiedades individuales por separado — cada una acepta hasta cuatro valores en el orden superior–derecho–inferior–izquierdo. También puedes apuntar a un lado específico con border-top, border-right, border-bottom y border-left.
El valor de border-style es lo que hace que aparezca un borde. Si solo estableces una anchura y un color pero dejas el estilo en su valor predeterminado none, el borde permanecerá invisible.
| Valor inicial | medium none currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. La anchura, el color y el estilo del borde son animables. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.border = "5px solid green"; |
Sintaxis
Sintaxis de la propiedad CSS border
border: border-width border-style border-color | initial | inherit;Ejemplo de la propiedad border:
Ejemplo de la propiedad CSS border con el valor solid
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: thick solid #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "thick solid green".</p>
</body>
</html>Resultado
Véase otro ejemplo donde el estilo del borde es discontinuo (dashed), la anchura está establecida en 3px y el color del borde es azul.
Ejemplo de la propiedad border con el valor "dashed":
Ejemplo de la propiedad CSS border con el valor dashed
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px dashed #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "3px dashed blue".</p>
</body>
</html>El atajo border siempre aplica el mismo estilo a los cuatro lados. Para diferenciar un lado, sobrescribe una de las propiedades individuales después de él. En el siguiente ejemplo, una sola declaración border-color toma tres valores: el primero se aplica al borde superior, el segundo al derecho e izquierdo, y el tercero al inferior.
Ejemplo de la propiedad border con 3 valores de border-color:
Ejemplo de la propiedad CSS border-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 3px solid;
border-color: #1c87c9 #666 #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<div>Here 3 values are applied to the border-color property.</div>
</body>
</html>Ejemplo de la propiedad border-style:
Ejemplo de la propiedad CSS border con los valores solid, dotted y double
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p,
div {
padding: 5px;
}
.border1 {
border: 5px solid #ccc;
}
.border2 {
border: 5px dotted #1c87c9;
}
div {
border: thick double #8ebf42;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p class="border1">A heading with a solid gray border.</p>
<p class="border2">A heading with a dotted blue border.</p>
<div>A div element with a thick double green border.</div>
</body>
</html>Esquinas redondeadas y propiedades relacionadas
El atajo border no controla el radio de las esquinas. Para redondear las esquinas, añade la propiedad separada border-radius:
p {
border: 3px solid #1c87c9;
border-radius: 8px;
}Conviene conocer algunas propiedades relacionadas:
- border-radius — redondea las esquinas.
- outline — dibuja una línea fuera del borde que no ocupa espacio en el diseño.
- border-collapse — fusiona los bordes de celdas adyacentes en tablas en una sola línea.
Valores
El atajo acepta los tres valores individuales de border en cualquier orden, además de las palabras clave globales.
| Valor | Descripción |
|---|---|
| border-width | Define la anchura del borde. El valor predeterminado es "medium". |
| border-style | Define el estilo del borde. El valor predeterminado es "none". |
| border-color | Define el color del borde. El valor predeterminado es el color actual del elemento. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |