Generador de radio de borde: esquinas CSS en línea

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

Cómo usar Generador de radio de borde

Ajusta las esquinas: juntas para un redondeo uniforme, individualmente para las formas.
Mira la vista previa en vivo: la personalidad del radio es imposible de juzgar a partir de números.
Prueba el modo blob (diferentes radios horizontales y verticales) para formas destacadas orgánicas.
Copia el CSS y estandariza 2 o 3 valores de radio en todo tu diseño.

¿Cuál es Generador de radio de borde?

Un generador de radio de borde hace que el redondeo de las esquinas sea visual: ajuste el radio de cada esquina con una vista previa en vivo y copie el CSS border-radius. El redondeo uniforme es trivial (border-radius: 8px); el generador gana su control por esquina (patrones 8px 24px 8px 24px) y la exótica sintaxis de barra diagonal - 30% 70% 70% 30% / 30% 30% 70% 70% - donde los radios horizontales y verticales difieren por esquina, produciendo las formas orgánicas "blob" que decoran los rellanos modernos páginas.

El radio es un dial tonal: 0 significa técnico, 4–8 px profesional, 12–24 px amigable, 9999 px en forma de píldora y manchas asimétricas divertidas; pocas propiedades CSS establecen la personalidad de un diseño de manera tan directa.

Sobre el Generador de radio de borde

Arrastre los controles por esquina, observe cómo se actualiza la forma en vivo y copie el CSS, desde los sutiles 12 píxeles de una tarjeta hasta una mancha completa de ocho valores.

Los patrones prácticos: radios consistentes en todo un sistema de diseño (elija de 2 a 3 valores, digamos entradas de 6 píxeles, tarjetas de 12 píxeles, modales de 24 píxeles, y reutilícelos; los radios aleatorios se leen como descuidados); el botón de la pastilla (radio ≥ la mitad de la altura, convencionalmente 9999 px); los círculos (50 % al elemento cuadrado — la receta del avatar); formas de globos de diálogo y pestañas (tres esquinas redondas, un cuadrado); y manchas de héroe a través de la sintaxis de barra, a menudo animadas entre dos conjuntos de radios para un fondo que se transforma suavemente.

Una nota sobre geometría: los elementos redondeados anidados se ven mal con radios iguales: el radio del elemento interior debe ser el del exterior menos el relleno entre ellos (16px exterior, relleno de 8px → 8px interior), o las esquinas pelean visiblemente.

Preguntas Frecuentes

En el sentido de las agujas del reloj desde arriba a la izquierda: arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda. Dos valores emparejan esquinas opuestas; un valor redondea los cuatro por igual.

Radios horizontales/radios verticales por esquina: 60% 40% 30% 70% / 50% 60% 40% 50% le da a cada esquina una elipse en lugar de un círculo: la sintaxis de forma de gota.

Círculo: radio de borde: 50% en un elemento con igual ancho y alto. Píldora: cualquier radio de al menos la mitad de la altura; 9999 px es el modismo que garantiza una píldora de cualquier tamaño.

Radios iguales en elementos anidados crean curvas visualmente no coincidentes. Regla: radio interior = radio exterior − espacio. Una tarjeta de 16 píxeles con un relleno de 8 píxeles quiere contenido con un radio de 8 píxeles en su interior.

Elija una escala pequeña y hágala cumplir: p.e. 4/8/16px o 6/12/24px para entradas/tarjetas/modales. Los números exactos importan menos que la coherencia: radios arbitrarios mixtos es lo que parece poco profesional.