Generador de Radio de Borde
Genera un radio de borde CSS por esquina con una vista previa en vivo.
Respuesta rápida: Generador de Radio de Borde: genera valores CSS de border-radius para cada esquina con una vista previa en directo. Funciona íntegramente en el navegador, es gratis y no requiere registro.
Última actualización
Bueno saber
Rounded corners feel simple until you need each corner different, and that is exactly what per-corner control unlocks. Matching modest radii on all four corners gives the friendly, neutral look of most buttons and cards; deliberately mismatched radii produce the soft, organic "blob" shapes that have become a common decorative element behind hero sections and avatars.
One thing worth knowing is the difference between pixel and percentage radii. Pixels give a fixed corner regardless of element size, while a percentage scales with the box — a 50% radius on a square produces a perfect circle, which is the standard trick for round avatar frames. The generator emits pixels in the UI, but swapping px for % in the output is a one-character change.
Because border-radius is an animatable property, adding a CSS transition on it lets a shape morph smoothly between two states on hover. Pair the result with the Box Shadow Generator for depth or the Gradient Generator for a fill, and you have the building blocks of a modern card in a couple of copy-pastes.
Preguntas frecuentes
- ¿Es gratuito?
- Sí — gratuito sin registro.
- ¿Puedo hacer formas de blob?
- Sí — da a cada esquina un radio muy diferente para un blob orgánico.
- ¿Qué unidades son soportadas?
- Píxeles en la interfaz; reemplaza px con % en la salida para un radio basado en porcentaje si lo prefieres.
- ¿Se suben mis configuraciones?
- No — la vista previa se ejecuta completamente en tu navegador.
- ¿Hace animaciones?
- Aplica una transición CSS a la propiedad border-radius en tu hoja de estilos para animar entre dos valores.