Cómo funciona border-radius
La propiedad border-radius redondea las esquinas de un elemento. Puedes especificar valores para las esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda en ese orden, usando unidades de longitud o porcentaje.
Usar el generador
Introduce valores numéricos o porcentajes para cada esquina, y la herramienta genera la regla CSS correspondiente. La vista previa se actualiza en tiempo real, por lo que puedes ver exactamente cómo se verá el elemento antes de copiar el código.
Esquinas elípticas avanzadas
Para crear una elipse en lugar de un círculo, usa la sintaxis de barra: border-radius: 50% / 50%. El primer conjunto de valores controla el radio horizontal, el segundo conjunto controla el radio vertical, permitiendo la forma independiente de cada esquina.
Compatibilidad con navegadores
Todos los navegadores modernos soportan la propiedad border-radius, incluyendo Chrome, Firefox, Safari, Edge y Opera. No se requieren prefijos de proveedor para las versiones actuales.
Más generadores CSS
Combina las esquinas redondeadas con un generador CSS de text-shadow para dar profundidad a títulos y botones.