Propiedad outline de CSS
Un contorno es una línea que se dibuja fuera de los bordes. Es igual en todos los lados. La propiedad outline es una abreviatura de:
La propiedad outline-color no funciona si se usa sola, porque el valor predeterminado de outline-style es none. Los contornos no ocupan espacio y no afectan las dimensiones de diseño del elemento.
Contornos vs. Bordes
Un contorno y un borde son similares, pero existen muchas diferencias. A diferencia de los bordes, los contornos son estrictamente rectangulares y no se pueden redondear mediante la propiedad border-radius. La propiedad outline dibuja una sola línea fuera del borde del elemento. Los contornos no ocupan espacio porque se encuentran fuera del contenido de un elemento.
| Valor inicial | medium none currentcolor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredable | No. |
| Animable | Sí. El contorno 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 dado, el outline-style del primer elemento es dotted, y el del segundo elemento es dashed.
En el siguiente ejemplo, el primer elemento no tiene un border, pero el segundo sí. Observe que el contorno del segundo elemento está fuera de su borde:
Ejemplo de la propiedad outline con un elemento que tiene un borde:
CSS outline y borde 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 contorno está fuera del borde del segundo elemento.
Ejemplo de la propiedad outline-color con la propiedad outline-style:
Ejemplo de código de color CSS outline
<!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>Valores
| Valor | Descripción |
|---|---|
| outline-width | Define el ancho del contorno. |
| outline-style | Define el estilo del contorno. |
| outline-color | Establece el color del contorno. |
| outline-offset | Desplaza el contorno desde el borde del elemento. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué se puede afirmar como verdadero sobre la propiedad CSS Outline?