Qué es border-radius
La propiedad CSS border-radius redondea las esquinas de un elemento. Acepta hasta cuatro valores, uno por esquina, en orden: superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda (sentido horario desde arriba).
Formas comunes
| Efecto | Valores (TL TR BR BL) |
|---|---|
| Esquinas uniformes (tarjeta estándar) | 16px en todas |
| Círculo perfecto (elemento cuadrado) | 50% en todas |
| Forma de "gota" | Una esquina en 0, las otras tres redondeadas |
| Píldora (botón) | La mitad de la altura del elemento en todas las esquinas |
Consejo
Para crear un círculo perfecto a partir de un div cuadrado, define border-radius como 50% — funciona porque el porcentaje es relativo al ancho/alto del propio elemento.
Preguntas frecuentes
¿En qué orden se aplican los cuatro valores de border-radius?
Siempre en sentido horario, empezando por la esquina superior izquierda: superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda.
¿Cómo hago un círculo perfecto?
Aplica border-radius: 50% a un elemento con el mismo ancho y alto.
¿Puedo usar porcentaje en vez de píxeles?
Sí, el CSS acepta porcentaje, pero esta herramienta trabaja en píxeles para facilitar el ajuste visual preciso.
¿Border-radius funciona en imágenes?
Sí, se puede aplicar a cualquier elemento, incluidas las etiquetas <code><img></code>, para crear avatares y miniaturas redondeadas.