Generador de radio de borde CSS

El generador de radio de borde CSS es un editor visual de la propiedad de radio de borde CSS. Arrastras un control deslizante para cada esquina, miras un elemento de vista previa en tiempo real y copias el CSS exacto que produce, sin adivinar valores de píxeles ni recargar la página.

La propiedad Border-Radius parece simple pero tiene una abreviatura compacta que hace que la gente haga tropezar a las personas: un valor redondea las cuatro esquinas, dos valores establecen las dos diagonales y cuatro valores se ejecutan en el sentido de las agujas del reloj desde la parte superior izquierda. Esta herramienta le permite configurar cada esquina de forma independiente y luego genera la abreviatura equivalente más corta automáticamente, de modo que su CSS se mantenga limpio.

Todo se ejecuta en su navegador. Comience desde una tarjeta, pastilla, círculo o blob preestablecida, ajuste cada esquina, cambie la unidad entre píxeles y porcentajes y copie la declaración. Sin cuenta, sin cargas, y sigue funcionando sin conexión una vez que la página se ha cargado.

Los porcentajes y píxeles se comportan de manera diferente en cualquier cosa que no sea cuadrada, y la diferencia sorprende a las personas. Un radio de píxel es la misma curva en cada esquina, mientras que un porcentaje se mide contra cada eje por separado, por lo que el 50 por ciento en un cuadro ancho da una elipse en lugar de un círculo. Esa es la propiedad que convierte un rectángulo en una píldora o en forma de lente. La especificación también lo protege de una geometría imposible: cuando los radios a lo largo de un borde suman más que la longitud de ese borde, el navegador escala cada radio del elemento proporcionalmente en lugar de superponerlos, por lo que un valor grande deja de crecer silenciosamente. La salida utiliza la taquigrafía válida más corta, razón por la cual cuatro esquinas iguales colapsan en un solo número.