Propiedad CSS outline
La propiedad CSS outline es un shorthand para outline-width, outline-style y outline-color. Consulta valores y ejemplos.
Un outline es una línea trazada alrededor de un elemento, justo fuera del borde. A diferencia de un border, un outline no ocupa espacio en el diseño y es igual en los cuatro lados — no se puede configurar por lado. Esta página cubre el shorthand outline, en qué se diferencia de un border y por qué es importante para la accesibilidad con teclado.
La propiedad outline es un shorthand que establece estas propiedades individuales en una sola declaración:
- outline-width — el grosor de la línea.
- outline-style — el estilo de la línea (
solid,dashed,dotted, …). Obligatorio para que el outline aparezca. - outline-color — el color de la línea.
- outline-offset — el espacio entre el outline y el borde. (Se establece por separado; no forma parte del shorthand
outline.)
El estilo de outline predeterminado es none, por lo que establecer solo outline-color no tiene efecto — también debes indicar un estilo. Como los outlines se pintan fuera del elemento y el modelo de caja los ignora, nunca desplazan el contenido circundante ni cambian las dimensiones de diseño del elemento.
Outlines vs. Borders
Un outline y un border se parecen, pero se comportan de forma diferente:
- Diseño: un border forma parte del modelo de caja y empuja el contenido adyacente; un outline se pinta encima y no ocupa espacio.
- Lados: los borders pueden estilizarse por lado (
border-top,border-left, …); un outline es siempre uniforme en los cuatro lados. - Forma: en la mayoría de los navegadores, un outline es estrictamente rectangular y no se redondea con border-radius, aunque el border sí lo esté.
- Posición: el outline se dibuja fuera del borde, por lo que cuando un elemento tiene ambos, el outline queda más allá del border.
| Valor inicial | medium none currentcolor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. El outline del elemento es animable. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.outline = "#eee dashed 10px"; |
Sintaxis
CSS outline
outline: outline-width | outline-style | outline-color | outline-offset | initial | inherit;Ejemplo de la propiedad outline:
Ejemplo de código CSS outline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.dotted {
outline: dotted;
}
p.dashed {
outline: dashed;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<p class="dotted">Lorem Ipsum is simply dummy text of the printing... </p>
<p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
</body>
</html>Resultado
En el ejemplo anterior, el outline-style del primer elemento es dotted y el del segundo es dashed.
En el siguiente ejemplo, el primer elemento no tiene border, pero el segundo sí. Observa que el outline del segundo elemento está fuera de su border:
Ejemplo de la propiedad outline con un elemento que tiene border:
CSS outline y border juntos, ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 1px solid #fc7f01;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>En el siguiente ejemplo, el outline está fuera del border del segundo elemento.
Ejemplo de la propiedad outline-color con la propiedad outline-style:
CSS outline, ejemplo de código de color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.blue {
outline-style: solid;
outline-color: #1c87c9;
}
div.green {
border: 1px solid black;
outline-style: solid;
outline-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="blue">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="green">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Espaciado del outline con outline-offset
De forma predeterminada, el outline se ajusta al borde del elemento. La propiedad outline-offset lo aleja (o, con un valor negativo, lo acerca hacia dentro). Es una propiedad independiente, no forma parte del shorthand outline:
button {
outline: 2px solid #1c87c9;
outline-offset: 4px; /* 4px gap between the border and the outline */
}Outlines y accesibilidad con teclado
El uso más importante de los outlines en la práctica es el indicador de foco. Cuando un usuario navega por una página con la tecla Tab, el navegador dibuja un outline predeterminado alrededor del elemento enfocado para que sepa dónde se encuentra. Eliminarlo sin un reemplazo es un problema grave de accesibilidad:
/* Do NOT do this — keyboard users lose track of focus */
button:focus {
outline: none;
}Si el anillo de foco predeterminado no encaja con tu diseño, rediseñalo en lugar de eliminarlo:
button:focus-visible {
outline: 2px solid #1c87c9;
outline-offset: 2px;
}Esto usa el estado :focus junto con la moderna pseudoclase :focus-visible, que muestra el outline solo para la interacción con teclado — de modo que los clics del ratón no activan el anillo mientras los usuarios de teclado permanecen orientados.
Valores
| Valor | Descripción |
|---|---|
| outline-width | Define el ancho del outline. |
| outline-style | Define el estilo del outline. |
| outline-color | Establece el color del outline. |
| outline-offset | Desplaza el outline desde el borde. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
- outline-style — el componente de estilo obligatorio del shorthand.
- outline-width — controla el grosor del outline.
- outline-color — controla el color del outline.
- outline-offset — separa el outline del borde.
- border — la contraparte del modelo de caja que sí afecta al diseño.