¿Cómo funciona border-radius?
border-radius redondea las esquinas de un elemento. Con un solo valor todas las esquinas son iguales, pero la propiedad da para mucho más: cada esquina puede tener su propio radio, y cada radio puede ser elíptico, con una medida horizontal y otra vertical distintas. Combinando todo eso, sin imágenes ni SVG, se consiguen píldoras, círculos, pestañas, gotas y las formas orgánicas tipo blob tan usadas en diseño web.
En este generador puedes mover las cuatro esquinas a la vez o desvincularlas para ajustar cada una por separado, en píxeles o en porcentaje. Si activas las esquinas elípticas, cada esquina tiene un radio horizontal y otro vertical, que se escriben con la sintaxis de ocho valores separada por una barra. Hay presets para empezar: píldora, círculo y forma blob. Las formas blob se basan precisamente en radios elípticos en porcentaje, distintos en cada esquina, y quedan muy bien en avatares, fondos decorativos o imágenes destacadas.
El CSS que obtienes es siempre la forma más corta posible: si las cuatro esquinas son iguales verás un solo valor, y si coinciden por parejas se agrupan como lo haría un desarrollador a mano. La vista previa se actualiza con cada cambio. Recuerda que, si los radios de dos esquinas contiguas suman más que el lado del elemento, el navegador los reduce proporcionalmente; por eso un valor muy grande en px produce una píldora perfecta sin calcular la altura exacta.
El generador funciona en tu navegador y es gratis sin límites: no necesitas ToolStudio Pro para usarlo ni para copiar el CSS.
¿Cómo generar un border-radius?
- Elige la unidad: px o %.
- Ajusta el radio de las cuatro esquinas juntas o desvincúlalas para editarlas una a una.
- Activa las esquinas elípticas si quieres radios horizontales y verticales distintos.
- Prueba los presets de píldora, círculo o blob.
- Copia el CSS de border-radius.
Usos habituales
- Botones y etiquetas con forma de píldora.
- Avatares e imágenes circulares.
- Tarjetas con esquinas suaves.
- Formas orgánicas decorativas para fondos e ilustraciones.
- Pestañas con solo las esquinas superiores redondeadas.
- Burbujas de chat con una esquina distinta.
Orden de los valores y sintaxis con barra
Con cuatro valores el orden es superior izquierda, superior derecha, inferior derecha e inferior izquierda, en el sentido de las agujas del reloj: border-radius: 16px 16px 0 0 redondea solo la parte de arriba.
Con la barra, los valores de antes son los radios horizontales y los de después los verticales: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% crea una forma orgánica. Un 50% en todas las esquinas convierte un cuadrado en círculo; para una píldora usa un valor en px mayor que la mitad de la altura, como 9999px.
Preguntas Frecuentes
¿Es gratis?
Sí, es gratis y sin límites. Los generadores CSS de ToolStudio no necesitan Pro: ajusta los valores, mira la vista previa y copia el CSS tantas veces como quieras.
¿px o %?
Los px dan un radio fijo, igual en elementos de cualquier tamaño. El % se calcula sobre el ancho (radio horizontal) y el alto (radio vertical) del elemento, así que la forma escala con él.
¿Cómo hago un círculo?
Usa un elemento con el mismo ancho y alto y border-radius: 50%. Tienes un preset para ello.
¿Qué es la sintaxis de 8 valores?
Es la forma elíptica de border-radius: cuatro radios horizontales, una barra y cuatro verticales. Permite esquinas ovaladas y formas tipo blob.
¿El contenido se recorta con las esquinas?
El fondo y el borde sí siguen la curva. Para recortar también una imagen o un hijo que se sale, añade overflow: hidden al elemento.