Table of contents
Un contorno es una línea dibujada fuera del borde del elemento.
Contorno CSS
Un contorno es una línea que se dibuja alrededor de los elementos, FUERA de los bordes, para que el elemento "resalte".
CSS tiene las siguientes propiedades outline:
outline-styleoutline-coloroutline-widthoutline-offsetoutline
Nota: El contorno difiere de los bordes. A diferencia del borde, el contorno se dibuja fuera del borde del elemento y puede superponerse a otro contenido. Además, el contorno NO forma parte de las dimensiones del elemento; el ancho y la altura totales del elemento no se ven afectados por el ancho del contorno.
Estilo del contorno
La propiedad outline-style especifica el estilo del contorno y puede tener uno de los siguientes valores:
dotted- Define un contorno punteadodashed- Define un contorno discontinuosolid- Define un contorno sólidodouble- Define un contorno doblegroove- Define un contorno ranurado 3Dridge- Define un contorno estriado 3Dinset- Define un contorno de inserción 3Doutset- Define un contorno inicial 3Dnone- No define contornohidden- Define un contorno oculto
El siguiente ejemplo muestra los diferentes valores de la propiedad outline-style:
Ejemplo:
Nota: Ninguna de las otras propiedades
outline(sobre las que aprenderá más en los próximos capítulos) tendrá NINGÚN efecto a menos que establezca la propiedadoutline-style.
Resumen
El contorno en CSS es una línea dibujada fuera del borde del elemento para resaltarlo. Las propiedades de contorno incluyen outline-style, que define el estilo del contorno con valores como dotted o solid. El contorno difiere del borde en que se dibuja fuera del elemento y no afecta las dimensiones del mismo.
Traducido con 💚 desde W3Schools.com