ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Youtube Canal de Youtube
Twitch Canal de Twitch
Telegram Canal de Telegram
Discord Servidor de Discord

Contornos

Mediante CSS se pueden modificar ciertos detalles relacionados con el modo en que interactua el usuario con un alguno de los componentes del interfaz de la página.

Contornos (outline)

La familia de propiedades outline-* nos permiten modificar el comportamiento del contorno de los elementos: una línea divisoria que rodea el contenido externo del propio elemento. A diferencia de los bordes, esta línea divisoria, por defecto no ocupa espacio y no tiene porque tener una forma rectangular.

Es fácil de observar esta línea divisoria en los navegadores, pulsando TAB y moviéndonos por los diferentes enlaces de la página. Generalmente, aparece como una línea punteada y es muy similar al funcionamiento de los bordes.

Propiedad Valor Significado
outline-color invert | Invierte el color de la misma.
outline-style | none Idem a los bordes. Estilo de la línea divisoria.
outline-width medium | thin | thick | Tamaño de los bordes. Tamaño predefinido o específico.
outline-offset Desplazamiento del contorno.

La propiedad outline-color permite modificar el color de la línea divisoria, en el caso de que el tamaño outline-width sea mayor que cero. Además, al igual que con los bordes, también se puede cambiar el estilo de la línea con outline-style .

En CSS3 también existe la propiedad outline-offset , que nos permite ampliar el desplazamiento o espacio interior dentro del perfil del elemento.

Atajo: Contornos

Es posible, al igual que con muchas otras propiedades, resumir en una sola propiedad para ahorrar espacio. El orden recomendado es el siguiente:

div {
    outline: <color> <style> <width>
}

Nota: En muchas ocasiones, estas propiedades son usadas por el desarrollador para indicar un outline: 0 y desactivar esta característica de contorno. Hay que tener mucho cuidado con esto, ya que este contorno visual es muy importante en el ámbito de la accesibilidad, y desactivarlo puede ser contraproducente.

Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.