Propiedad outline-width de CSS
La propiedad outline-width define el ancho de un contorno. Un contorno es una línea que se dibuja alrededor de un elemento. Pero es diferente de la propiedad borde.
Las propiedades ancho y alto de un elemento no incluyen el ancho del contorno porque el contorno no se considera parte de las dimensiones del elemento.
Esta propiedad acepta los siguientes valores: medium, thin, thick, length, initial, inherit, revert y unset.
INFO
Antes de establecer el outline-width, debes configurar la propiedad outline-style en un valor distinto de none para que el ancho sea visible.
| Valor inicial | medium |
|---|---|
| Se aplica a | Todos los elementos. |
| Herencia | No. |
| Animable | Sí. El ancho del contorno es animable. |
| Versión | CSS2 |
| Sintaxis DOM | Object.style.outlineWidth = "thick"; |
Sintaxis
Sintaxis de CSS outline-width
outline-width: medium | thin | thick | length | initial | inherit | revert | unset;Ejemplo de múltiples valores
Ejemplo de código CSS 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, el segundo sí. Observa que el contorno del segundo elemento está fuera de su borde.
Contorno con borde
Otro ejemplo de código CSS 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>Combinar 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 tamaño medio. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| thin | Define un contorno fino. | 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 principal. | |
| 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. |
Práctica
¿Cuáles son los valores posibles para la propiedad 'outline-width' en CSS?