Propiedad CSS outline-color
La propiedad CSS outline-color se usa para establecer el color del contorno de un elemento. Consulta valores y ejemplos.
La propiedad CSS outline-color establece el color del contorno de un elemento — la línea trazada justo fuera del borde.
Un contorno es similar a un borde, pero con dos diferencias importantes:
- No ocupa espacio. El ancho y la altura de un elemento no incluyen el contorno, por lo que agregar o cambiar un contorno nunca desplaza el diseño circundante (a diferencia de un borde, que forma parte del modelo de caja).
- No puede tener lados individuales. Un contorno envuelve todo el elemento a la vez; no se puede establecer un color diferente solo en la parte superior o izquierda, como se puede hacer con border-color.
Dado que los contornos están fuera de la caja y no refluyen la página, son la forma estándar de mostrar el foco del teclado. Cuando un usuario navega con la tecla Tab por enlaces, botones y campos de formulario, el navegador dibuja un contorno de foco para que pueda ver dónde se encuentra. Esto convierte a outline-color en una herramienta de accesibilidad antes que en una decorativa — ten cuidado antes de eliminar u ocultar los contornos de foco.
Por qué usar outline-color
Recurrirás a outline-color principalmente para:
- Estilizar estados de foco — dar a
:focuso:focus-visibleun color de contorno de alto contraste y acorde a la marca en lugar del predeterminado del navegador. - Resaltar un elemento sin cambiar su tamaño ni desplazar sus vecinos.
- Depurar el diseño — un contorno brillante temporal muestra la extensión exacta de un elemento sin afectar el modelo de caja.
outline-color no tiene efecto visible por sí solo. Un contorno solo se renderiza cuando también tiene un estilo, así que combínalo con el atajo outline o la propiedad outline-style (su estilo predeterminado es none).
Valores de color aceptados
Puedes establecer el color del contorno con cualquier color CSS estándar: un nombre de color (red), un código hexadecimal (#1c87c9), o las notaciones funcionales rgb(), rgba(), hsl() y hsla(). La palabra clave currentColor también es útil — hace que el contorno coincida con el color del texto del elemento. Para la lista completa de formatos de color, consulta la sección de colores HTML.
| Valor inicial | invert |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredado | No. |
| Animable | Sí. El color es animable. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.outlineColor = "#8ebf42"; |
Sintaxis
Sintaxis CSS de outline-color
outline-color: invert | color | initial | inherit;Ejemplo de la propiedad outline-color:
Ejemplo de código CSS outline-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #ccc;
outline-style: double;
outline-color: invert;
}
</style>
</head>
<body>
<h2>Outline-color property example</h2>
<p>Invert default value is applied.</p>
</body>
</html>Resultado
Ejemplo de la propiedad outline-color con colores hexadecimal, RGB, RGBA, HSL, HSLA:
Ejemplo de todos los valores de CSS outline-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-color: #1c87c9;
}
.p2 {
outline-style: solid;
outline-color: hsl(65, 100%, 50%);
}
.p3 {
outline-style: solid;
outline-color: hsla(84, 49%, 50%, 1);
}
.p4 {
outline-style: solid;
outline-color: rgb( 224, 0, 0);
}
.p5 {
outline-style: solid;
outline-color: rgba(204, 204, 204, 1);
}
</style>
</head>
<body>
<h2>Outline-color property example</h2>
<p class="p1">This is a paragraph with hexadecimal blue outline.</p>
<p class="p2">This is a paragraph with hsl yellow outline.</p>
<p class="p3">This is a paragraph with hsla green outline.</p>
<p class="p4">This is a paragraph with rgb red outline.</p>
<p class="p5">This is a paragraph with rgba grey outline.</p>
</body>
</html>Cada párrafo mantiene su diseño idéntico a los demás — solo cambia el color del contorno — porque el contorno vive fuera de la caja y no añade ancho ni alto.
Ejemplo de estilización de un contorno de foco:
El uso más común en la práctica de outline-color es hacer visible el foco del teclado y acorde a la marca. Aquí un enlace obtiene un contorno de foco azul grueso en lugar del predeterminado del navegador:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:focus-visible {
outline-style: solid;
outline-width: 3px;
outline-color: #1c87c9;
outline-offset: 2px;
}
</style>
</head>
<body>
<h2>Focus outline example</h2>
<p>Press <kbd>Tab</kbd> to move focus to the link below:</p>
<a href="#">Focus me with the keyboard</a>
</body>
</html>La propiedad outline-offset aleja el contorno unos píxeles del elemento para que no toque el texto. Usa :focus-visible en lugar de :focus para que el contorno aparezca para usuarios de teclado pero no en clics del ratón.
Evita outline: none o outline-color: transparent en elementos enfocables a menos que reemplaces el indicador de foco con algo igualmente visible. Eliminarlo hace que la página sea inutilizable para usuarios que solo usan el teclado.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| invert | Invierte cualquier color aplicado al fondo. Este valor garantiza la visibilidad del contorno independientemente del color de fondo. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| color | Define el color del contorno. Se pueden usar nombres de color, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla(), o la palabra clave currentColor. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
outline-color es una de las tres propiedades individuales que conforman el atajo outline:
- outline-style — establece el estilo de línea (
solid,dashed,double, …). Requerido para que el contorno se muestre. - outline-width — establece el grosor de la línea.
- outline-offset — establece el espacio entre el contorno y el borde.
Escribir outline: 3px solid #1c87c9; es la forma abreviada de establecer el ancho, el estilo y el color a la vez.