Bordes

El arte de dibujar límites con estilo

Un borde puede hacer muchas cosas a la vez: separar, destacar, decorar o simplemente decirle al ojo humano "oye, esto es una caja y empieza aquí".

Sin borde, algunos elementos se pierden. Con demasiado borde, parecen un formulario del año 2004 que ha visto cosas horribles.

La clave está en usarlo con intención.

La propiedad border

Ya viste antes el shorthand border, pero ahora toca darle protagonismo. Esta propiedad junta tres piezas en una sola línea:

1. El grosor
2. El estilo
3. El color

Ejemplo:

Eso significa:

• 4px: grosor
• dashed: línea discontinua
• orange: color naranja

Estilos de borde

Algunos valores comunes para el estilo del borde:

• solid: línea continua
• dashed: línea discontinua
• dotted: línea de puntos

No todos transmiten lo mismo. Un borde sólido se siente serio. Uno discontinuo puede parecer más juguetón o más provisional. CSS también comunica carácter.

Tu desafío 🚀

Dale al elemento .aviso un borde de 4px dashed orange.

Ya no es solo una caja. Ahora tiene presencia...