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.

Como generador de CSS de radio de borde, la parte útil es que hace la aritmética abreviada por usted. Establezca la parte superior izquierda y la inferior derecha en 24 y la parte superior derecha y la inferior izquierda en 8, en px, y la salida leerá radio de borde: 24px 8px; porque los pares diagonales coinciden. Deje caer la parte inferior derecha en 0 y se convertirá en el valor de tres 24px 8px 0px, ya que la parte superior derecha y la inferior izquierda aún coinciden. Puede comparar cada resultado con la vista previa antes de copiarlo, que es para lo que sirve un generador de radio de borde CSS.