Generador de Radio de Borde CSS
border-radius parece simple hasta que intentas explicar por qué 50% en un cuadrado da un círculo, pero 50% en un rectángulo da un óvalo. Este generador te permite introducir un valor para cada una de las cuatro esquinas, elegir entre px, % y rem, y copiar la forma abreviada exacta que produce. Útil para formas de botones, esquinas de tarjetas, botones en forma de píldora y esquinas asimétricas.
Cómo construir un radio de borde
-
1
Define cada esquina
Introduce un radio para las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda.
-
2
Elige la unidad
Píxeles (tamaño fijo), porcentaje (relativo al elemento) o rem (relativo al tamaño de fuente de la raíz).
-
3
Genera el CSS
Pulsa Generar CSS para crear la regla abreviada.
-
4
Copia la regla
Copia la forma abreviada de `border-radius` y pégala en tu hoja de estilos.
Orden de atajo
border-radius: superior-izquierda superior-derecha inferior-derecha inferior-izquierda;
Igual que margen/relleno: en sentido horario comenzando desde la superior izquierda. Los valores omitidos reflejan la esquina opuesta. Así que border-radius: 10px 20px; significa 10px en superior izquierda y inferior derecha, 20px en superior derecha y inferior izquierda.
Lo que este generador no hace
Fija un radio por esquina, por lo que nunca genera esquinas elípticas (la forma de dos valores con barra, como border-radius: 20px 10px / 5px 15px;) ni las propiedades extendidas como border-top-left-radius. Si las necesitas, escribe el CSS a mano.
Porcentaje vs. píxeles
| Unidad | Comportamiento |
|---|---|
| px | Fijo, no escala con el tamaño del elemento |
| % | Porcentaje del ancho del elemento (horizontal) y altura (vertical) |
| em | Escala con el tamaño de fuente del elemento |
| rem | Escala con el tamaño de fuente raíz |
50% en un elemento cuadrado = círculo. En un rectángulo de 200x100, 50% = 100px de radio horizontal + 50px vertical = elipse.
Formas comunes
| Forma | CSS |
|---|---|
| Círculo (cuadrado) | border-radius: 50%; |
| Píldora | border-radius: 9999px; (cualquier valor >= la mitad de la altura) |
| Tarjeta redondeada | border-radius: 8px; o 12px |
| Burbuja de chat | border-radius: 18px 18px 0 18px; (cola en la parte inferior derecha) |
| Sutil | border-radius: 2px; o 4px |
La regla de “la mitad de la altura” para píldoras
Un botón en forma de píldora es un rectángulo donde las tapas horizontales son semicírculos perfectos. Para lograr eso de manera confiable, establece border-radius en al menos la mitad de la altura del elemento. Usar 9999px (o cualquier valor muy grande) es seguro porque el navegador limita el radio a la geometría real.
Interacción con el desbordamiento
border-radius solo recorta el fondo, el borde y la sombra de caja por defecto. Para recortar elementos secundarios (imágenes, elementos anidados) a la forma redondeada, agrega:
overflow: hidden;
o usa isolation: isolate + overflow: hidden para contener también contextos de apilamiento.
Nota de accesibilidad
No hay problema de accesibilidad con border-radius en sí, pero el redondeo extremo en elementos interactivos (píldoras, chips) no debe reducir el objetivo de toque. Mantén los botones al menos 44x44 px (recomendación WCAG) independientemente del redondeo de las esquinas.
Preguntas frecuentes
Porque el border-radius porcentual se mide como “% del ancho” horizontalmente y “% de la altura” verticalmente, en un elemento no cuadrado esto produce una elipse. Para un círculo, el elemento debe ser cuadrado, o usar valores en píxeles que coincidan con las dimensiones del elemento.
Solo el fondo, el borde y la sombra de caja por defecto. Los elementos secundarios no se recortan a menos que también agregues overflow: hidden al padre.
Es animable entre valores numéricos: transition: border-radius 200ms; funciona para píxeles y porcentajes. Animar entre un atajo elíptico complejo y un radio simple puede producir cuadros intermedios sorprendentes; prueba y simplifica los estados de inicio/final si se ve extraño.
La especificación no establece un límite, pero los navegadores limitan el radio efectivo a la mitad del borde más corto del elemento. Usar border-radius: 9999px en un botón de 40px de alto produce una píldora, el navegador limita a 20px silenciosamente.
Herramientas relacionadas
Referencia de la tabla ASCII
Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.
Referencia de caracteres HTML
Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Referencia de atajos de teclado
Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.