Generador de border-radius CSS
Redondea las esquinas de una caja, un botón o una imagen ajustando cada esquina por separado, en píxeles o en porcentaje, y con radios elípticos para formas orgánicas. El código se genera en su forma abreviada.
Cómo usar el generador de border-radius
- Con Enlazar esquinas activado, al mover un deslizador cambian las cuatro a la vez. Desactívalo para dar a cada esquina su propio radio.
- Elige la unidad: px para radios fijos (botones, tarjetas) o % para radios proporcionales al tamaño (círculos, formas que escalan).
- Activa Radios elípticos para definir por separado el radio horizontal y el vertical de cada esquina.
- Cambia el ancho y alto de la vista previa para ver cómo se comporta en elementos de distinta proporción, y copia el código.
Cómo funciona border-radius
Cada esquina se recorta con un cuarto de círculo (o de elipse) del radio indicado. La propiedad abreviada acepta de uno a cuatro valores, igual que margin o padding:
| Valores | Significado | Ejemplo |
|---|---|---|
| 1 | Las cuatro esquinas iguales | border-radius: 12px |
| 2 | Sup. izq. e inf. der. / sup. der. e inf. izq. | border-radius: 12px 0 |
| 3 | Sup. izq. / sup. der. e inf. izq. / inf. der. | border-radius: 12px 4px 0 |
| 4 | Sup. izq. / sup. der. / inf. der. / inf. izq. | border-radius: 24px 24px 0 24px |
Con la barra se separan radios horizontales y verticales: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% produce la típica forma orgánica tipo «blob». Los porcentajes horizontales se refieren al ancho del elemento y los verticales a su altura.
Si la suma de dos radios contiguos supera el lado de la caja, el navegador reduce todos los radios proporcionalmente hasta que caben. Por eso 999px genera una píldora perfecta en un botón de cualquier tamaño: en un botón de 40 px de alto, el radio efectivo queda en 20 px.
Valores habituales en interfaces
| Elemento | Radio típico |
|---|---|
| Campos de formulario y botones | 4–8 px |
| Tarjetas y paneles | 8–16 px |
| Ventanas modales y hojas inferiores en móvil | 16–24 px |
| Etiquetas (chips) y botones píldora | 999 px |
| Avatares | 50 % |
Si trabajas con unidades relativas, convierte los píxeles con la herramienta de px a rem: 8 px son 0,5 rem con la fuente base de 16 px.
Consejos
- Radios anidados: si una tarjeta con radio 16 px tiene dentro una imagen con 8 px de margen, la imagen debe usar 16 − 8 = 8 px para que las curvas sean concéntricas.
- Imágenes: aplica el radio directamente a la etiqueta
imgo usaoverflow: hiddenen el contenedor. - Coherencia: define dos o tres radios en variables CSS y úsalos en todo el diseño junto con tus sombras y degradados.
- Animaciones: border-radius se puede animar; para transiciones naturales al pasar el ratón, diseña la curva con el generador cubic-bezier.
Preguntas frecuentes
¿En qué orden se escriben las esquinas en border-radius?
En el sentido de las agujas del reloj empezando arriba a la izquierda: superior izquierda, superior derecha, inferior derecha e inferior izquierda. Con dos valores, el primero es para las esquinas superior izquierda e inferior derecha.
¿Cómo hago un círculo con CSS?
Dale al elemento el mismo ancho y alto y aplica border-radius: 50%. Si el elemento es rectangular, el 50 % produce una elipse.
¿Cómo hago un botón con forma de píldora?
Usa un radio mayor que la mitad de la altura, por ejemplo border-radius: 999px. El navegador lo reduce automáticamente al máximo posible y las esquinas quedan totalmente redondas sin deformarse.
¿Qué significa la barra en border-radius?
Separa los radios horizontales de los verticales. border-radius: 50% / 20% crea esquinas elípticas: 50 % del ancho en horizontal y 20 % de la altura en vertical.