Esquinas redondeadas

El día que las cajas dejaron de ser ladrillos

Durante años, media web parecía construida por arquitectos obsesionados con el ángulo recto. Todo eran cajas duras, esquinas rígidas y botones que parecían sacados de una fotocopiadora enfadada.

Entonces llegó border-radius y el diseño respiró.

¿Qué hace border-radius?

Redondea las esquinas de un elemento.

Con un valor enorme como 999px, el navegador redondea tanto las esquinas que el botón acaba con forma de píldora.

Pequeños valores, grandes diferencias

• border-radius: 4px; suaviza un poco
• border-radius: 12px; ya se nota claramente
• border-radius: 999px; convierte muchas cajas en cápsulas

Una pequeña curva cambia muchísimo cómo se percibe una interfaz. Lo rígido parece más técnico. Lo redondeado suele sentirse más amable y moderno.

Tu desafío 🚀

Haz que .boton tenga border-radius: 999px.

A veces basta con suavizar las esquinas para que todo parezca más humano...