Handytool
DesarrolladorGratisSe ejecuta localmente

Generador de border-radius CSS

Diseña visualmente CSS border-radius — uniforme, por esquina y elíptico — con vista previa en vivo.

Vista previa
CSS
border-radius: 16px;
Modo
Unidad

El modo por esquina controla cada esquina individualmente; elíptico divide los radios horizontal y vertical.

Acerca de Generador de border-radius CSS

El generador border-radius de Handytool te permite dar forma a las esquinas de un elemento con controles deslizantes en lugar de conjeturas. Usa modo uniforme para un cuadro redondeado simple, modo por esquina para construir formas de píldora asimétricas, o modo elíptico para dividir radios horizontales y verticales para formas blob orgánicas. La vista previa se actualiza en vivo y la declaración CSS está a un clic de distancia.

Funciones de Generador de border-radius CSS

  • 01

    Modos uniforme y por esquina

    El modo uniforme aplica un radio a cada esquina. El modo por esquina controla la esquina superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda independientemente — formas de píldora, hoja y etiqueta asimétrica están a pocos clics de distancia.

  • 02

    Esquinas elípticas (X/Y)

    Alterna modo elíptico para especificar un radio horizontal y vertical por esquina — la sintaxis que CSS soporta para formas de blob orgánicas.

  • 03

    Tres unidades

    Cambia entre px, % y rem. Los valores de porcentaje crean verdaderas elipses que se escalan con el cuadro; los valores rem rastrean el tamaño de fuente raíz para accesibilidad.

Preguntas frecuentes sobre Generador de border-radius CSS

¿Cuál es la diferencia entre px y %?
Los radios de píxeles son absolutos — una esquina de 16px es siempre 16px. Los radios de porcentaje son relativos al ancho y alto del elemento, por lo que 50% crea un círculo perfecto en un cuadro cuadrado y una elipse en un rectángulo.
¿Cuándo debo usar modo elíptico?
Usa modo elíptico cuando quieras una esquina que sobresalga más en un eje — por ejemplo una píldora horizontal (50%/100%) o una forma de blob con forma de hoja. CSS expresa esto como `top-left-x top-right-x ... / top-left-y top-right-y ...`.
¿Por qué mi radio de porcentaje se ve mal en un cuadro que no es cuadrado?
Los porcentajes en border-radius son relativos al lado correspondiente: porcentajes horizontales a ancho, vertical a altura. En un cuadro ancho y corto que significa que las esquinas se estiran en elipses, no arcos perfectos.
¿Funciona la salida en todos los navegadores?
Sí — border-radius y la sintaxis elíptica se soportan en todos los navegadores modernos incluyendo todas las versiones evergreen de Safari, Firefox, Edge y Chrome.

Herramientas relacionadas

Desarrollador →

Explora otras herramientas

Todas las herramientas →