22-Contornos en css

Los contornos en css son lineas que van por fuera del borde del elemento

Tenemos un elemento html que puede ser un parrafo por ejemplo, le ponemos un borde para que se vea mejor su dimension, y despues le ponemos un contorno

ya sabes que es un contorno? te lo muestro en el ejemplo

ejemplo de contorno

Este elemento va a tiene un borde negro de 2px y un contorno rojo de 10px

creo que ya sabes que es un contorno, pero si tienes dudas te dibujo el esquema de un contorno

Soy el contorno

Soy el Borde

soy el elemento html

...

CSS tiene las siguientes propiedades de contorno:

• outline-color
• outline-style
• outline-width
• outline-offset
• outline

Recuerda el contorno es dibujado por fuera del borde

Estilos de los contornos

La propriedad outline-style especifica el contorno y puede tener los seguientes valores:

• dotted- Define un contorno punteado
• dashed- Define un contorno discontinuo
• solid- Define un contorno sólido
• double- Define un doble contorno
• groove- Define un contorno ranurado en 3D
• ridge- Define un contorno estriado en 3D
• inset- Define un contorno de inserción 3D
• outset- Define un contorno inicial en 3D
• none- No define contorno
• hidden- Define un contorno oculto

style="padding: 5px; border:1px solid black;outline: dotted 10px red"

style="padding: 5px; border:1px solid black;outline: #ff8080 solid 10px;"

style="padding: 5px; border:1px solid black;outline: #ff8080 dashed 10px;"

style="padding: 5px; border:1px ridge black;outline: #4CAF50 solid 10px;"

style="padding: 5px; border:1px ridge black;outline: #0099ff inset 10px;"

style="padding: 5px; border:1px ridge black;outline: #0099ff outset 10px;"

---

Ir al indice

---