Generador de border-radius CSS

¿Qué es Generador de border-radius CSS?

El generador de border-radius CSS es un editor visual gratuito de la propiedad border-radius, pensado para desarrolladores front-end y diseñadores. Usa los deslizadores de rango y los campos numéricos para fijar el radio horizontal y vertical de cada esquina en píxeles, elige una unidad y activa el modo elíptico para obtener la sintaxis con barra de las esquinas ovaladas. Un recuadro de vista previa muestra la forma redondeada en tiempo real, y se genera la declaración abreviada y compacta para que la copies. Elige un preajuste como Redondeado, Píldora, Círculo o un Blob orgánico desde el control segmentado para empezar rápido y luego afina cualquier esquina. Úsalo para diseñar tarjetas suaves, botones de píldora, círculos perfectos, squircles y formas decorativas tipo gota sin memorizar el orden de las esquinas.

Cómo usar Generador de border-radius CSS

1. Elige un preajuste (Redondeado, Píldora, Círculo o Blob) desde el control segmentado para cargar una forma inicial.
2. Arrastra el deslizador de cada esquina o escribe un número para fijar su radio horizontal.
3. Activa Elíptico para mostrar un segundo radio vertical por esquina y producir esquinas ovaladas con la sintaxis de barra.
4. Elige la unidad (px o %) en los ajustes; los porcentajes escalan el radio con el tamaño del recuadro.
5. Observa cómo se actualiza la vista previa y copia el border-radius abreviado generado en tu hoja de estilos.

Ejemplos

Las cuatro esquinas 16, elíptico desactivado

border-radius: 16px;

Preajuste Píldora, todas las esquinas 9999

border-radius: 9999px;

SI 40/20, SD 10, ID 40/20, II 10, elíptico activado

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Preguntas frecuentes

¿En qué orden van las cuatro esquinas?

La forma abreviada lista las esquinas en sentido horario empezando por la superior izquierda: superior izquierda, superior derecha, inferior derecha e inferior izquierda. Esta herramienta siempre escribe los cuatro valores en ese orden, así que el resultado es inequívoco y fácil de ajustar a mano después.

¿Qué hace el modo elíptico?

border-radius puede tomar un radio horizontal y uno vertical por esquina, separados por una barra, para dibujar esquinas ovaladas (elípticas) en lugar de circulares. Activa Elíptico para fijar un segundo radio vertical en cada esquina; la salida usa entonces la sintaxis de barra 'horizontal / vertical'.

¿Debo usar px o porcentaje?

Los píxeles dan un tamaño de esquina fijo, independiente del recuadro. Los porcentajes son relativos al ancho y alto del recuadro, así que 50% en cada esquina convierte un cuadrado en un círculo perfecto y el redondeo escala al cambiar de tamaño el elemento. Cambia la unidad en los ajustes.

¿Cómo hago un círculo perfecto o una píldora?

Elige el preajuste Círculo (50% en cada esquina) para un círculo a partir de un cuadrado, o el preajuste Píldora (un radio en píxeles muy grande) para que los lados cortos se vuelvan semicírculos completos. También puedes partir de un preajuste y afinar esquinas concretas.

¿Se suben mis datos a algún sitio?

No. El generador se ejecuta por completo en tu navegador con JavaScript: tus valores de radio nunca se envían a un servidor, así que funciona de forma privada e incluso sin conexión una vez cargada la página.