¿Cómo hago un círculo?

Usa border-radius: 50% en un elemento con el mismo ancho y alto. En un rectángulo, 50% da una elipse, mientras que un valor grande en píxeles da una píldora con lados rectos.

¿Qué significa la barra en border-radius?

Separa los radios horizontales de los verticales, de modo que cada esquina pueda ser un cuarto de elipse en lugar de un cuarto de círculo. Las formas orgánicas usan esta sintaxis.

Generador de border-radius

Redondea cada esquina, cambia a radios elípticos y arrastra los controles de los bordes para modelar formas orgánicas. Copia el CSS de border-radius o Tailwind.

Vista previa en tiempo real

Cambia a % para modelar la forma con los controles de los bordes.

border-radius: 24px;

Todo permanece en tu navegador.

Referencias de formatos

MDN — border-radius

Página de la herramienta actualizada: 2026-10-25

Vista previa en tiempo real

Guía y ejemplo

Herramientas relacionadas

Referencias de formatos