🎨 Diseño Web y CSS
Generador de border-radius CSS
Diseña esquinas redondeadas CSS con control individual por esquina. Crea desde simples bordes redondeados hasta formas orgánicas tipo blob. Con previsualización en tiempo real.
Error:
Guía de border-radius
Shorthand (todas las esquinas igual)
border-radius: 8px;Dos valores (top-left/bottom-right + top-right/bottom-left)
border-radius: 10px 20px;Cuatro esquinas individualmente
border-radius: 10px 20px 15px 5px; /* TL TR BR BL */Formas especiales
- Círculo: border-radius: 50% (en un elemento cuadrado).
- Pastilla (pill): border-radius: 9999px o 50vw.
- Esquina sola: border-top-left-radius: 20px;
Sintaxis avanzada (radios horizontales/verticales)
border-radius: 20px / 10px; /* elipse */Preguntas frecuentes
¿Cómo hago una forma de "blob" orgánica?
Usa la sintaxis de dos valores por esquina: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Herramientas como blobmaker.app generan estos valores de forma interactiva.