Generador de border-radius

Una declaración de border-radius puede aceptar hasta cuatro valores de esquina independientes, además de una sintaxis opcional de ocho valores separados por barra para curvas orgánicas: más piezas móviles de las que la mayoría imagina hasta que necesita algo más allá de una simple tarjeta redondeada. Este generador pone todas esas piezas en pantalla: cuatro controles de esquina con su propia unidad en px o porcentaje, un atajo para vincular todas las esquinas en formas simétricas y un modo blob para formas que ningún valor de radio único puede expresar.

El modo esquinas cubre las formas que la gente busca en la práctica: vincula cada esquina a un solo control para círculos perfectos, píldoras y squircles, o desvincúlalas para redondear solo la parte superior de un panel desplegable o un solo lado de una tarjeta. Una previsualización con fondo de cuadros detrás de la forma, conmutable entre un fondo claro y uno oscuro, hace evidente exactamente qué esquinas se recortan con cada radio: el mismo truco visual que usan las herramientas de archivos de este sitio para mostrar la transparencia.

El modo blob es la otra mitad: la sintaxis CSS de ocho valores separados por barra permite que los radios horizontales y verticales de cada esquina difieran, que es lo que convierte un rectángulo redondeado en un contorno orgánico e irregular. Pulsa Aleatorizar en cualquier momento para obtener una forma nueva y copia el CSS exacto que hay detrás, sin necesidad de exportar SVG ni de usar librerías externas. Las páginas de preajustes cubren las búsquedas que la gente teclea realmente en un buscador: un círculo perfecto, un botón píldora con forma de estadio, un squircle al estilo iOS y un blob orgánico listo para usar.

Como todas las herramientas de este sitio, se ejecuta por completo en tu navegador: sin subidas, sin cuentas, y el generador sigue funcionando sin conexión una vez que la página ha cargado.