Generador border-radius
Redondea esquinas y crea formas blob orgánicas.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
De las esquinas redondeadas clásicas a los blobs de moda
El modo 4 esquinas cubre lo cotidiano: botones, tarjetas, avatares. El modo blob usa la sintaxis de ocho valores para formas suaves y orgánicas muy de moda en ilustraciones y fondos decorativos.
-
Elige el modo
4 esquinas para un redondeo simple, blob para una forma orgánica.
-
Ajusta los controles
El botón «Aleatorio» genera un blob único con un clic.
-
Copia el CSS
La propiedad border-radius completa, lista para pegar.
La sintaxis en dos ejemplos
| Modo | CSS generado |
|---|---|
| 4 esquinas iguales | border-radius: 16px; |
| Blob por defecto | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| Antes de la barra / | Radios horizontales de las 4 esquinas |
| Después de la barra / | Radios verticales de las 4 esquinas |
Todo se calcula en tu navegador. Para recortar una imagen según la forma, añade overflow: hidden en el contenedor.
Preguntas frecuentes
¿Cómo redondeo una sola esquina?
En modo «4 esquinas», ajusta el control de la esquina deseada y deja las demás en 0. El CSS generado lista los radios en el orden superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda; cuando todos los valores son iguales, la herramienta escribe un solo valor.
¿Qué es la sintaxis blob de ocho valores?
border-radius acepta radios horizontales y verticales separados por una barra «/». Por ejemplo, «30% 70% 70% 30% / 30% 30% 70% 70%» da cuatro esquinas con radios asimétricos: eso es lo que crea esas formas orgánicas suaves.
¿Por qué usar porcentajes en lugar de píxeles?
Los porcentajes son relativos al tamaño del elemento: el blob mantiene sus proporciones a cualquier dimensión. Los píxeles van mejor para un redondeo fijo, como un botón o tarjeta de esquinas constantes.
¿border-radius recorta el contenido?
El borde y el fondo siguen el redondeo, pero el contenido hijo puede desbordar. Añade «overflow: hidden» en el elemento para que imágenes y contenido se recorten según las esquinas redondeadas.