Propiedad CSS outline-offset
La propiedad CSS outline-offset define el espacio entre el contorno y el borde de un elemento. Consulta valores y ejemplos.
La propiedad outline-offset especifica la cantidad de espacio entre el contorno de un elemento y el borde del mismo. El espacio añadido por outline-offset siempre es transparente, por lo que el fondo de la página (o lo que haya detrás del elemento) se muestra a través del hueco.
Esta página explica qué hace outline-offset, cómo se comportan los valores positivos y negativos, cuándo conviene usarlo y las consideraciones que debes tener en cuenta.
Diferencias entre contornos y bordes
outline-offset solo tiene sentido una vez que entiendes cómo se comportan los contornos, ya que funcionan de manera muy diferente a los bordes:
- Un contorno se dibuja fuera del borde del elemento — por defecto queda pegado al borde.
- Un contorno no ocupa espacio en el diseño, por lo que añadirlo o desplazarlo nunca mueve los elementos adyacentes.
- Un contorno puede ser no rectangular (por ejemplo, rodea cada línea de un elemento en línea de varias líneas).
Dado que un contorno no afecta al diseño, outline-offset es una forma segura de alejar el contorno del elemento (o acercarlo) sin que la página se recomponga. Esta propiedad es una de las propiedades CSS3.
No forma parte de la propiedad abreviada outline. A diferencia de outline-style, outline-color y outline-width, outline-offset debe declararse siempre de forma independiente.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredable | No. |
| Animable | Sí. El ancho del espacio es animable. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.outlineOffset = "20px"; |
Sintaxis
Sintaxis de CSS outline-offset
outline-offset: length | initial | inherit;Ejemplo de la propiedad outline-offset:
Ejemplo de código CSS outline-offset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
margin: 20px;
border: 2px dotted #000;
background-color: #8ebf42;
outline: 4px solid #666;
outline-offset: 10px;
}
</style>
</head>
<body>
<h2>Outline-offset property example</h2>
<div class="ex1">The outline-offset is 10px</div>
</body>
</html>Resultado
En el ejemplo anterior, el espacio entre el contorno y el borde es de 10px, y el fondo de la página se muestra a través de ese hueco transparente.
Valores negativos
outline-offset también acepta longitudes negativas. Un desplazamiento negativo mueve el contorno hacia adentro, de modo que se dibuja sobre el relleno o el contenido del elemento en lugar de rodearlo:
outline-offset: -5px; /* outline moves 5px inside the border edge */Esto resulta útil cuando se quiere un anillo de foco que quede dentro de un elemento con poco espacio (por ejemplo, un botón pegado al borde de un contenedor) sin que el contorno sea recortado por un ancestro con overflow: hidden. Un desplazamiento negativo mayor que el elemento hace que el contorno colapse y desaparezca.
Cuándo usarlo
- Anillos de foco con espacio. Combina
:focus-visiblecon un pequeño desplazamiento positivo para que el anillo de foco del teclado no quede demasiado pegado al elemento. Nunca elimines el contorno por completo sin proporcionar un sustituto — es la principal señal visual para los usuarios de teclado. - Efectos decorativos de "doble borde" sin añadir un segundo elemento, ya que el hueco del desplazamiento deja ver el fondo.
- Evitar anillos recortados dentro de contenedores con desplazamiento, usando un pequeño desplazamiento negativo.
Valores
| Valor | Descripción |
|---|---|
| length | Espacio entre el contorno y el borde del elemento. Puede ser negativo para dibujar el contorno dentro del borde. El valor por defecto es 0. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Aspectos a tener en cuenta
outline-offsetno se hereda — los elementos hijo no lo adquieren automáticamente.- Los porcentajes no están permitidos; solo funcionan las unidades de
length(px,em,rem, etc.). - El desplazamiento solo se renderiza cuando hay un contorno visible, es decir, cuando outline-style no es
noney el ancho es mayor que cero. - El hueco es transparente —
outline-offsetno puede tener un color propio.