Generador de border-radius

Qué es un generador de border-radius

Te da controles para las cuatro esquinas de una caja y escribe el CSS. Redondea las cuatro por igual y obtienes una píldora o un círculo; redondéalas de forma distinta y salen esas formas de gota que aparecen en cabeceras y avatares.

Este añade la parte que los demás dejan fuera. CSS tiene una regla sobre qué ocurre cuando los radios que pides no caben en la caja, y hace algo más sorprendente que recortarlos. El panel bajo la vista previa te muestra el resultado de esa regla mientras arrastras.

Todo se ejecuta en tu navegador. No se sube nada y no hay cuenta.

Cómo usar el generador

1. Fija el tamaño de la caja. El ancho y el alto importan más de lo que parece, porque que tus radios quepan depende por completo de ellos. Un radio que va bien en una tarjeta no va bien en un botón.
2. Arrastra las esquinas. Cada esquina tiene un control por defecto. Activa las esquinas elípticas para darle a cada una un radio horizontal y otro vertical: para eso está la barra en la forma abreviada.
3. Lee el panel y copia. Si el factor de escala baja de 1, los números tachados son lo que pediste y los de al lado son lo que se dibuja. El bloque de CSS es la declaración lista para pegar.

La regla que cambia esquinas que nunca tocaste

Imagina un botón de 160 por 44 con 8px en las cuatro esquinas, y decides que la superior izquierda lleve un barrido grande de 40px. Cambias un valor. Lo que se dibuja son 36,7px en esa esquina, y 7,3px en las otras tres.

No es un artefacto de redondeo ni una rareza del navegador. Está en la especificación. CSS Backgrounds and Borders Level 3 dice que, cuando los dos radios que se encuentran en un lado suman más que la longitud de ese lado, se calcula f como la menor razón entre la longitud del lado y la suma de sus radios entre los cuatro lados, y entonces, si f es menor que 1, se multiplica por f el radio de todas las esquinas del elemento. No el de la esquina culpable. El de todas.

La corrección es global. Empuja una esquina más allá de lo que la caja aguanta y toda la forma encoge en proporción, incluidas las esquinas que no editaste y que por sí solas eran perfectamente legales. Cuando lo sabes, mucho CSS que casi encajaba cobra sentido.

El caso más conocido es pedir un círculo sobre algo que no es cuadrado. Pon 100px en las cuatro esquinas de una caja de 200 por 100 y f sale exactamente 0,5, así que cada esquina se dibuja a 50px: un estadio, no un círculo. Suele explicarse diciendo que el radio se limita a la mitad de la altura. Esa descripción da aquí la respuesta correcta por casualidad, y la regla es otra: es un único factor aplicado a todo, y por eso también cambia las esquinas del lado largo.

Conviene conocer el límite con precisión. La especificación dice que el escalado se aplica solo si f es menor que 1, así que un círculo sobre un cuadrado —50px en una caja de 100 por 100— cae justo en la línea y no se escala nada. Un píxel más y f pasa a 0,9901, y todas las esquinas empiezan a encoger. Esta herramienta sigue la especificación en ese borde en lugar de redondearlo.

Limitaciones honestas

La vista previa es un elemento real con un border-radius real, así que lo que ves lo dibuja tu propio navegador; pero los números del panel se calculan a partir de la especificación y no se leen del navegador. Es deliberado, porque no hay nada que leer: el escalado ocurre al pintar la caja, y el valor que una hoja de estilos declara es el que tú pusiste.

Aquí todo va en píxeles. Los porcentajes son válidos en border-radius y se resuelven contra el ancho y el alto de la propia caja, lo que los hace mejor opción para cualquier cosa adaptable, pero convierten la pregunta de si tus radios caben en una que cambia con la ventana. Si usas porcentajes, la regla sigue aplicándose; simplemente no puedes verla en una vista previa fija.

La herramienta modela una caja lisa. No se dibujan bordes, relleno ni la diferencia entre la curva exterior y la interior: un elemento real con un borde grueso tiene un segundo radio, más pequeño, en el canto interno, que la especificación deriva restando el grosor del borde. Es una parte legítima de border-radius y queda fuera del alcance de un generador.

Aquí no hay squircle, y no puede haberlo. Las formas suavemente redondeadas del hardware de Apple son superelipses, una familia de curvas distinta del cuarto de elipse que especifica CSS, y ninguna combinación de valores de border-radius reproducirá una. Conseguir ese aspecto en la web exige un clip-path o un SVG, y cualquier herramienta que prometa un squircle solo con border-radius promete algo que la propiedad no puede hacer.

El motor lleva 30 comprobaciones. La principal no es una tabla de salidas esperadas sino la propiedad que la regla existe para garantizar: sobre 20 000 cajas aleatorias, los dos radios de ningún lado suman nunca más que la longitud de ese lado tras el escalado, junto a un control que confirma que esas mismas entradas sí la incumplen antes, de modo que la prueba no pueda satisfacerse con una función que lo reduzca todo a cero. Un sabotaje deliberado que recortaba cada esquina por separado, que es lo que hacen varios generadores, falla esa suite en cuatro sitios.

¿Por qué es gratis?

Cuatro controles y una división son trabajo que tu propia máquina hace al instante. No se sube nada, no hay cuenta y no hay nada que marcar con agua.

Si lo que quieres son colores y no esquinas, el generador de degradados y el conversor de color de este sitio están al lado, también sin subir nada.