Generador de border-radius CSS

Cómo se usa

1. Ya hay una tarjeta redondeada (16px) en pantalla — arrastra el control Radio o cambia la unidad (px / %) y todo se actualiza en vivo, sin pulsar ningún botón.
2. Cambia de modo con las opciones: «Todas las esquinas» mueve un solo control, «Por esquina» edita las cuatro esquinas por separado (AI, AD, BD, BI), «Elíptico» añade un radio horizontal y uno vertical por esquina (la sintaxis con barra).
3. Haz clic en un preajuste (Recto, Tarjeta redondeada, Círculo, Píldora, Hoja, Blob) para cargar una forma ya hecha — el modo y la unidad se ajustan automáticamente. Copia la declaración border-radius completa con un clic.

Alcance, límites y preguntas habituales

• Solo border-radius: sin esquinas suaves/continuas al estilo iOS (squircle) — esas necesitan clip-path o SVG y quedan fuera de alcance.
• No se pegan valores CSS existentes: cada valor viene de controles, preajustes y modos, así que no hay nada que analizar mal.
• Cuando los radios adyacentes suman más que un lado, el navegador los reduce proporcionalmente. La vista previa es el resultado real renderizado; la caja de código muestra los valores que has definido.
• El preajuste Píldora genera 9999px — la forma abreviada habitual para «lo más redondo posible»; el navegador lo limita a la mitad del lado más corto.
• Los porcentajes se miden por eje: los radios horizontales respecto al ancho y los verticales respecto a la altura (la vista previa es cuadrada, así que allí ambos coinciden). En otros tamaños de elemento, el mismo porcentaje da formas distintas.
• No se guarda ni comparte nada con un parámetro en el enlace: recarga y vuelves a la Tarjeta redondeada predeterminada. Todo se ejecuta en tu navegador.