Qué es el border-radius
border-radius es la propiedad CSS que redondea las esquinas de cualquier caja. Con un solo valor redondeas las cuatro esquinas por igual; con cuatro valores das a cada esquina su propio radio; y con la sintaxis completa de ocho valores creas esquinas elípticas para lograr formas orgánicas tipo “blob”. Este generador te deja mover sliders, ver el resultado al instante y copiar la línea CSS lista para pegar.
Cómo usar el generador
- En modo Simple, elige la unidad (
pxo%) y arrastra los sliders. Con “Enlazar las 4 esquinas” activado, un único slider controla todas; desactívalo para ajustar cada esquina por separado. - En modo Blob, ajusta los cuatro radios horizontales y los cuatro verticales para deformar la caja.
- Pulsa Blob aleatorio para generar una forma orgánica agradable de un tirón.
- Copia la salida
border-radius: ...;con el botón Copiar.
Las cuatro esquinas individuales
El atajo con cuatro valores sigue el sentido del reloj empezando arriba a la izquierda: border-radius: sup-izq sup-der inf-der inf-izq. Cuando dos valores opuestos coinciden, el motor CSS los agrupa en formas más cortas.
| Valores | Significado | Ejemplo |
|---|---|---|
| 1 valor | Las 4 esquinas iguales | border-radius: 12px |
| 2 valores | Diagonal 1 / diagonal 2 | border-radius: 12px 4px |
| 4 valores | Cada esquina por separado | border-radius: 12px 24px 8px 16px |
Ejemplo resuelto
Supón una tarjeta de 300 por 200 px y quieres solo la esquina superior izquierda muy redondeada. Pones sup-izq en 40 px y el resto en 6 px: la salida es border-radius: 40px 6px 6px 6px;. Si en cambio buscas una “hoja” (dos esquinas opuestas redondas y dos rectas), usas border-radius: 0 40px 0 40px;. Con la unidad en porcentaje, border-radius: 50% sobre una caja cuadrada de 200 por 200 px produce un círculo perfecto, porque el radio equivale a la mitad de cada lado.
La sintaxis de 8 valores (formas orgánicas)
La forma completa separa radios horizontales y verticales con una barra: border-radius: h1 h2 h3 h4 / v1 v2 v3 v4. Los cuatro primeros son el radio horizontal de cada esquina; los cuatro que van después de la /, el radio vertical. Como cada esquina se convierte en un cuarto de elipse, la caja deja de ser un rectángulo redondeado y se vuelve un “blob”. El punto de partida clásico es border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%, y variando esos ocho números consigues gotas, guijarros y manchas para fondos, avatares o secciones destacadas.
Preguntas frecuentes
¿Cómo hago un círculo?
Usa una caja cuadrada (mismo ancho y alto) y pon border-radius: 50%. Si la caja es rectangular obtendrás una elipse en lugar de un círculo. En el generador, cambia la unidad a % y sube el slider hasta 50.
¿Puedo dar a una esquina un valor distinto al resto?
Sí. Desactiva “Enlazar las 4 esquinas” y mueve cada slider por separado, o edita directamente los cuatro valores del atajo. También existen las propiedades sueltas como border-top-left-radius para una sola esquina.
¿Cómo se crea una forma orgánica o blob?
Cambia al modo Blob y juega con los ocho valores, o pulsa “Blob aleatorio”. La clave está en usar porcentajes distintos en horizontal y en vertical: cuando el radio h y el v de una esquina no coinciden, esa esquina se curva de forma asimétrica y aparece el efecto de mancha.
¿border-radius recorta el contenido de dentro?
No por sí solo. Redondea el borde y el fondo, pero una imagen hija puede sobresalir por las esquinas. Añade overflow: hidden al contenedor para recortar todo lo que quede fuera de las curvas.