En este artículo
Entendiendo border-radius
La propiedad CSS border-radius redondea las esquinas del borde exterior de un elemento. Acepta de uno a cuatro valores para controlar cada esquina independientemente — superior izquierda, superior derecha, inferior derecha e inferior izquierda. Un solo valor aplica el mismo radio a las cuatro esquinas, mientras que cuatro valores permiten crear formas asimétricas.
Border-radius funciona con cualquier elemento que tenga bordes, fondos o sombras visibles. Recorta tanto el fondo como el borde a la forma redondeada e interactúa correctamente con box-shadow, outline y overflow.
Creando formas con border-radius
Variando los valores del radio, puedes crear una amplia gama de formas geométricas completamente con CSS. El generador te permite ajustar visualmente cada esquina y ver el resultado inmediatamente.
- Forma píldora — establece border-radius a 9999px para crear extremos completamente redondeados como un botón cápsula. Es el patrón UI más común para etiquetas, insignias y botones píldora
- Círculo — aplica border-radius: 50% a un elemento cuadrado (ancho y alto iguales). El porcentaje se calcula relativo a cada dimensión, creando un círculo perfecto
- Formas de hoja y gota — establece dos esquinas opuestas en valores altos y las otras dos en cero (ej. border-radius: 60% 0 60% 0) para crear formas orgánicas
Pruébalo gratis — sin registro
Generar CSS Border Radius →Esquinas elípticas avanzadas
El atajo border-radius soporta una sintaxis con barra (/) que permite definir radios horizontales y verticales separados para cada esquina. Esto crea curvas elípticas en lugar de circulares.
- Sintaxis con barra — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% significa que los radios horizontales son todos 50%, pero los verticales difieren, creando una forma de huevo
- Propiedades de esquinas individuales — border-top-left-radius: 50px 30px establece una esquina elíptica con 50px de radio horizontal y 30px de radio vertical
- Comportamiento de porcentajes — con porcentajes, el radio horizontal es relativo al ancho y el radio vertical a la altura. Así, 50% / 50% en un rectángulo crea una elipse, no un círculo
Preguntas frecuentes
¿Debo usar porcentajes o píxeles para border-radius?
Usa porcentajes cuando quieras que el radio escale con el tamaño del elemento (círculos, elipses). Usa píxeles para redondeo constante independientemente del tamaño (botones, tarjetas). Un patrón común es 8px para componentes UI y 50% para avatares.
¿Border-radius causa problemas de renderizado subpíxel?
En pantallas de alta resolución, valores pequeños de border-radius (1-2px) pueden aparecer dentados. Usar un radio ligeramente mayor (mínimo 3-4px) puede mejorar la calidad de renderizado.
¿Cómo interactúa border-radius con bordes y outlines?
Border-radius redondea el borde exterior del border. Si el elemento tiene un borde grueso, el radio interior se calcula como radio-exterior menos ancho-borde. Los outlines no siguen border-radius en la mayoría de navegadores. Box-shadow sí sigue la forma redondeada.