Generador de Border Radius
Esquinas redondeadas con control total o formas orgánicas con la sintaxis de dos ejes. Ajusta, previsualiza y copia el CSS.
.element {
border-radius: 16px;
}Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
La propiedad border-radius parece trivial hasta que necesitas algo más que «todas las esquinas iguales». Cada esquina acepta su propio radio y, con la sintaxis extendida de dos ejes (horizontal / vertical), se convierten en formas orgánicas: gotas, hojas, piedras o blobs asimétricos perfectos para avatares decorativos, tarjetas hero y fondos ilustrativos sin una sola imagen. Este generador te da ambos mundos: modo clásico con las cuatro esquinas enlazadas o independientes, y modo blob con presets cuidados y botón aleatorio para descubrir siluetas. Los valores usan píxeles para esquinas clásicas y porcentajes para blobs, así que las formas escalan con el elemento.
Características
- ✓Modo simple con esquinas enlazadas
- ✓Control independiente de las 4 esquinas
- ✓Formas orgánicas (blob) con sintaxis horizontal / vertical
- ✓5 presets de blob y generador aleatorio
- ✓Vista previa en vivo sobre fondo degradado
¿Cómo generar un border-radius?
- 1
Elige el modo
Esquinas clásicas en px u orgánicas con porcentajes.
- 2
Ajusta los valores
Deslizadores por esquina, presets de blob o aleatorio.
- 3
Mira la vista previa
El resultado real se dibuja al instante sobre un degradado.
- 4
Copia el CSS
Un solo valor listo para tu hoja de estilos.
Preguntas frecuentes
¿Qué significa la barra en la sintaxis de blob?
Cada esquina tiene dos radios: uno horizontal y otro vertical. Lo que va antes de la barra son los radios horizontales de las cuatro esquinas y lo que va después, los verticales. Mezclándolos aparecen las curvas orgánicas.
¿Por qué usar porcentajes en los blobs?
Con porcentajes la forma se adapta al tamaño del elemento: el mismo blob funciona en un avatar de 48px y en una tarjeta de 400px sin recalcular nada.
¿Se sube algo a un servidor?
No, el valor se genera combinando tus opciones directamente en tu navegador.
Herramientas relacionadas
Incrusta Generador de Border Radius en tu web
Integra Generador de Border Radius en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/border-radius-generator"
width="100%"
height="700"
frameborder="0"
title="Generador de Border Radius — miguelacm.es"
></iframe>