Generador de border-radius
Redondea esquinas de forma visual: arrastra las esquinas de la vista previa o cambia a formas blob orgánicas.
Arrastra los puntos de las esquinas para redondearlas
Radios horizontales
Radios verticales
Cómo funciona el generador de border-radius
Diseña esquinas redondeadas arrastrando la vista previa y copia un valor de border-radius limpio, incluidas las formas blob orgánicas.
Arrastra las esquinas
Agarra el punto de cualquier esquina de la vista previa y arrástralo hacia dentro: el radio sigue al puntero. Vincula todas las esquinas para un radio uniforme o da forma a cada una por separado.
Formas blob
Cambia al modo blob para usar la sintaxis de 8 valores con barra: los radios horizontal y vertical de cada esquina producen formas suaves y orgánicas, muy populares en las secciones hero y los avatares modernos.
Aleatorio
Un clic genera un nuevo blob orgánico. Sigue haciendo clic hasta encontrar una silueta que te guste y luego afínala con los controles deslizantes.
Código limpio
El valor generado se reduce a la forma correcta más corta: un único valor para esquinas uniformes, cuatro valores o la sintaxis completa con barra para los blobs.
Preguntas frecuentes
border-radius admite radios horizontales y verticales separados por una barra: h1 h2 h3 h4 / v1 v2 v3 v4. Cada esquina pasa a ser un cuarto de elipse en lugar de un cuarto de círculo: así se crean las formas blob orgánicas con CSS puro.
Los píxeles dan un tamaño de esquina fijo, sin importar las dimensiones del elemento: lo mejor para tarjetas y botones. Los porcentajes escalan con el elemento: 50% en un cuadrado crea un círculo perfecto, y las formas blob se basan precisamente en valores porcentuales.
No. El compositor rasteriza border-radius y es muy poco costoso, incluso combinado con overflow: hidden o transformaciones. También se puede animar con transition sin problemas.
Círculo: mismo ancho y alto más border-radius: 50%. Píldora: cualquier rectángulo con un border-radius de al menos la mitad de su altura; lo habitual es escribir simplemente 999px.