Generador de Border Radius

Arrastra los controles para dar forma a cada esquina del cuadro de vista previa y copia el CSS border-radius resultante. Bloquea las cuatro esquinas juntas para un rectángulo redondeado sencillo, o desbloquéalas para crear formas de píldora, hojas y manchas asimétricas.

¿Qué es esta herramienta?

border-radius es la propiedad CSS que redondea las esquinas de un elemento. Escrita a mano necesita cuatro valores en un orden fijo — superior izquierda, superior derecha, inferior derecha, inferior izquierda — un orden fácil de confundir, sobre todo cuando las cuatro esquinas son distintas.

Esta herramienta elimina las conjeturas: mueve un control, observa cómo se redondea la esquina en la vista previa en vivo y lee el CSS exacto en el cuadro de código generado. Un interruptor de bloqueo alterna entre un radio uniforme (las cuatro esquinas iguales, el caso más común) y cuatro controles independientes para formas orgánicas y asimétricas.

¿Por qué utilizarlo?

La vista previa se actualiza al instante mientras arrastras — sin editar CSS ni recargar para ver el resultado.
Bloqueo de un clic para el caso habitual de 'mismo radio en todas las esquinas'; desbloquéalo para botones tipo píldora, bocadillos de diálogo y formas orgánicas.
Genera el valor único abreviado cuando todas las esquinas coinciden, o el valor completo de cuatro cifras cuando no — listo para copiar y pegar en ambos casos.
Se ejecuta enteramente en tu navegador. Nada de lo que introduces se envía a ningún sitio.
Gratis, sin registro, funciona en móvil.

Cómo utilizarlo

Deja marcado 'bloquear las 4 esquinas' y arrastra cualquier control para fijar un radio uniforme en todo el cuadro.
Desmarca el bloqueo para controlar cada esquina de forma independiente — útil para píldoras, gotas y tarjetas asimétricas.
Observa cómo se actualiza la vista previa en vivo al ajustar cada control.
Copia el CSS generado del cuadro de código y pégalo en tu hoja de estilos.

Ejemplo

Entrada

Superior izq.: 40px, Superior der.: 8px, Inferior der.: 40px, Inferior izq.: 8px

Resultado

border-radius: 40px 8px 40px 8px;

Esquinas opuestas desiguales como esta crean una silueta de hoja o pétalo — un efecto habitual en tarjetas e insignias.

¿px o %? ¿Qué unidad debo usar?

Este generador produce valores en píxeles, la opción correcta por defecto para la mayoría del trabajo de interfaz: botones, tarjetas y campos donde quieres un radio fijo y predecible sin importar el tamaño del elemento.

Los porcentajes se comportan de forma distinta — son relativos al propio ancho y alto del elemento, así que un radio del 50% en un elemento cuadrado produce un círculo perfecto, y en uno no cuadrado, una elipse. Si buscas ese efecto (avatares, formas orgánicas que escalan con el contenedor), toma el CSS generado y cambia los valores px por un valor % a mano — por ejemplo, border-radius: 50% convierte cualquier cuadro cuadrado en un círculo.

Patrones habituales de border-radius

Tarjeta redondeada: todas las esquinas iguales, entre 8 y 16px aproximadamente para componentes de interfaz.
Botón tipo píldora: fija el radio a la mitad de la altura del elemento (o usa 9999px, que recorta a una píldora completa sea cual sea la altura).
Avatar circular: border-radius: 50% en un elemento cuadrado (ancho y alto iguales).
Bocadillo de diálogo: tres esquinas redondeadas, una en ángulo recto — pon tres controles altos y uno a 0.
Forma de hoja o pétalo: esquinas opuestas iguales, esquinas adyacentes distintas — por ejemplo, superior izquierda e inferior derecha grandes, superior derecha e inferior izquierda pequeñas.

Combínalo con una sombra

Las esquinas redondeadas rara vez aparecen solas — las tarjetas y botones suelen necesitar también algo de sombra para dar profundidad. Usa el Generador de Box Shadow para ajustar una sombra y aplica ambos fragmentos de CSS al mismo elemento.

→ Generador de Box Shadow · Convertidor de unidades

Preguntas frecuentes

¿Cuál es el orden de las esquinas en border-radius?

La forma abreviada de CSS siempre sigue el orden superior izquierda, superior derecha, inferior derecha, inferior izquierda, en sentido horario desde la esquina superior izquierda. Los cuatro controles de esta herramienta están etiquetados en ese mismo orden, así que nunca tienes que memorizarlo.

¿Puedo usar unidades distintas en cada esquina?

Sí, en CSS real puedes mezclar px, %, em y rem entre esquinas, aunque en la práctica es poco habitual. Esta herramienta genera valores uniformes en px por simplicidad — cambia cualquier valor individual a % u otra unidad directamente en tu hoja de estilos si necesitas mezclarlas.

¿Por qué border-radius: 50% a veces crea un óvalo en lugar de un círculo?

Porque los porcentajes son relativos a cada eje por separado — el radio horizontal es un porcentaje del ancho del elemento, el vertical un porcentaje de su alto. En un elemento cuadrado (ancho y alto iguales) eso produce un círculo perfecto; en un rectángulo, una elipse.

¿border-radius también afecta a las imágenes de fondo y los bordes?

Sí — border-radius recorta el fondo, el borde y (en navegadores modernos) el box-shadow del elemento a la forma redondeada. No recorta el contenido hijo que se desborde a menos que también apliques overflow: hidden al padre.

¿Hay un límite para lo grande que puede ser el radio?

No hay un límite estricto — si el radio supera la mitad del ancho o alto del elemento, los navegadores lo limitan para que las dos curvas de ese lado se encuentren exactamente en el punto medio, que es como un cuadrado se convierte en un círculo perfecto o una píldora.