Propiedad CSS outline-width
La propiedad CSS outline-width establece el ancho del contorno de un elemento. Consulta sus valores y ejemplos.
La propiedad outline-width define el grosor de un contorno (outline) — la línea trazada justo fuera del borde de un elemento. Funciona de manera similar a border-width, pero con una diferencia importante: el contorno no ocupa espacio en el modelo de caja, por lo que cambiar outline-width nunca desplaza el diseño de los elementos circundantes.
Dado que el contorno se sitúa fuera del borde y queda excluido del modelo de caja, el width y el height de un elemento no incluyen el contorno. Es exactamente por esto que los contornos son la forma predeterminada que tienen los navegadores de mostrar el foco del teclado — el anillo de foco puede aparecer y desaparecer sin desplazar el contenido de la página.
Esta propiedad acepta los siguientes valores: medium, thin, thick, un valor <length>, initial, inherit, revert y unset.
Cuándo usar outline-width
- Indicadores de foco. Cuando personalizas el anillo de foco con las pseudoclases
:focuso:focus-visible,outline-widthcontrola cuán prominente es ese anillo. Mantener un contorno de foco visible es importante para la accesibilidad — nunca lo establezcas en0ni elimines el contorno sin proporcionar otro estilo de foco visible. - Resaltado sin reflujo. Dado que el contorno está fuera del modelo de caja, un contorno más grueso al pasar el cursor o al enfocar no desplazará a los elementos vecinos como lo haría un borde más grueso.
- Depuración del diseño. Un rápido
outline: 1px solid redes una forma popular de visualizar las cajas de los elementos sin afectar su tamaño.
outline-width solo tiene efecto una vez que outline-style se establece en un valor distinto de none (el predeterminado). Si el estilo es none, el contorno no tendrá ancho independientemente de lo que establezcas aquí. El atajo outline establece el ancho, el estilo y el outline-color a la vez.
Las tres palabras clave corresponden a grosores definidos por el navegador en lugar de valores de píxel fijos, por lo que pueden diferir ligeramente entre navegadores. En la práctica, thin equivale aproximadamente a 1px, medium (el valor predeterminado) a aproximadamente 3px, y thick a aproximadamente 5px. Cuando necesitas un valor exacto y predecible, usa un <length> como 2px o 0.2em.
Ten en cuenta que outline-width no acepta porcentajes ni valores negativos.
| Valor inicial | medium |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredado | No. |
| Animable | Sí. El ancho del contorno es animable. |
| Versión | CSS2 |
| Sintaxis DOM | Object.style.outlineWidth = "thick"; |
Sintaxis
Sintaxis CSS de outline-width
outline-width: medium | thin | thick | length | initial | inherit | revert | unset;Ejemplo con múltiples valores
Ejemplo de código CSS de outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-width: 5px;
}
.p2 {
outline-style: solid;
outline-width: 0.4em;
}
.p3 {
outline-style: solid;
outline-width: thin;
}
.p4 {
outline-style: solid;
outline-width: medium;
}
.p5 {
outline-style: solid;
outline-width: thick;
}
.p6 {
outline-style: solid;
outline-width: 0.1cm;
}
.p7 {
outline-style: solid;
outline-width: 1mm;
}
</style>
</head>
<body>
<h2>Outline-width property example</h2>
<p class="p1">This is a paragraph with outline set to 5px.</p>
<p class="p2">This is a paragraph with outline set to 0.4em.</p>
<p class="p3">This is a paragraph with outline set to thin.</p>
<p class="p4">This is a paragraph with outline set to medium.</p>
<p class="p5">This is a paragraph with outline set to thick.</p>
<p class="p6">This is a paragraph with outline set to 0.1cm.</p>
<p class="p7">This is a paragraph with outline set to 1 mm.</p>
</body>
</html>Resultado
En el siguiente ejemplo, el primer elemento no tiene borde y el segundo sí. Observa que el contorno del segundo elemento se dibuja fuera de su borde, con un espacio que podrías ampliar usando outline-offset.
Contorno con borde
Otro ejemplo de código CSS de outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 2px solid #1c87c9;
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>Ejemplo básico de contorno
Ejemplo de la propiedad CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Combinación de outline-width y outline-style
Ejemplo de la propiedad CSS outline-width con la propiedad outline-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dashed;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| medium | Define un contorno de grosor medio. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| thin | Define un contorno delgado. | Pruébalo » |
| thick | Define un contorno grueso. | Pruébalo » |
| length | Define el grosor del contorno. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. | |
| revert | Revierte la propiedad al valor establecido por el agente de usuario o la cascada anterior. | |
| unset | Restablece la propiedad a su valor heredado o inicial, según la herencia. |
Propiedades relacionadas
- outline — atajo para el ancho, el estilo y el color en una sola declaración.
- outline-style — necesario para que el ancho sea visible.
- outline-color — establece el color del contorno.
- outline-offset — agrega espacio entre el contorno y el borde del elemento.
- border-width — el equivalente en el modelo de caja que sí afecta al diseño.