Cómo funciona el generador de border-radius
Este generador le permite definir hasta ocho valores para border-radius: cuatro horizontales y cuatro verticales, personalizando completamente cada esquina de su elemento. La herramienta muestra en tiempo real cómo se ve el resultado, utilizando el estándar de CSS 'border-radius: h1 h2 h3 h4 / v1 v2 v3 v4' para crear formas asimétricas y blobs orgánicos.
Puede elegir entre unidades en píxeles o porcentajes, dependiendo de si busca una apariencia fija o responsiva. Además, existen modos especiales como el aleatorio o el 'fancy', que generan valores automáticamente para diseños más creativos.
Consejos para elegir unidades y valores
Usar valores en píxeles le da resultados precisos, pero la forma no se adapta al tamaño del elemento. Los porcentajes permiten que el border-radius escale cuando el elemento cambia, ideal para diseños responsivos.
Recuerde que los navegadores limitan los valores máximos: un radio no puede ser mayor que la mitad del lado correspondiente. Si introduce valores demasiado grandes, el navegador los ajustará automáticamente para evitar distorsión.
Compatibilidad y limitaciones del border-radius
El CSS generado por esta herramienta es compatible con todos los navegadores modernos, ya que utiliza la sintaxis estándar de border-radius. Sin embargo, la vista previa depende de cómo el navegador renderiza las esquinas; algunos efectos muy complejos pueden verse distintos en cada navegador.
La herramienta solo genera código CSS, no imágenes ni SVGs. Si necesita animar entre diferentes formas, puede usar transiciones CSS para interpolar los valores, pero solo funcionará entre radios compatibles. Para formas más avanzadas fuera de rectángulos, se requiere SVG o clip-path.
Privacidad y uso local
Todo el procesamiento y la vista previa se realizan directamente en su navegador. Ningún dato se envía a servidores externos y su trabajo permanece privado y seguro.
Ideal para prototipos y pruebas rápidas, tanto para diseñadores como para desarrolladores que buscan perfeccionar estilos visuales sin instalar nada.
Preguntas frecuentes
¿Cómo uso la sintaxis de border-radius con ocho valores?
Puede definir cuatro radios horizontales y cuatro verticales, usando la sintaxis 'border-radius: h1 h2 h3 h4 / v1 v2 v3 v4'. Esto permite crear esquinas asimétricas y formas experimentales, ideales para blobs y diseños personalizados.
¿Cuál es la diferencia entre píxeles y porcentajes en border-radius?
Los píxeles establecen radios fijos, mientras que los porcentajes adaptan los radios según el tamaño del elemento. Usar porcentajes es útil para diseños responsivos, ya que las formas se ajustan dinámicamente.
¿Por qué mi forma cambia al ajustar el tamaño del elemento?
Si usa porcentajes, el border-radius se escala automáticamente con el tamaño del elemento. Además, los navegadores limitan los radios si exceden la mitad del lado, lo que puede modificar la forma en tamaños extremos.
¿Puedo animar entre diferentes blobs o esquinas usando CSS?
Sí, es posible animar los valores de border-radius con transiciones CSS. Para mejores resultados, mantenga la cantidad de valores igual en las formas de inicio y destino para que la animación sea fluida.
¿Cómo funciona el modo aleatorio o fancy?
La herramienta genera valores únicos para cada esquina, usando algoritmos que buscan formas orgánicas o blobs. Todo el cálculo se realiza en el navegador, permitiendo explorar combinaciones creativas sin repetir patrones.
¿El CSS generado es compatible con todos los navegadores?
Sí, la sintaxis de border-radius es estándar y funciona en los navegadores actuales. Sin embargo, la apariencia puede variar ligeramente según el motor de renderizado.
¿Algo no funciona o tienes una idea para esta herramienta? Cuéntanos