Generador de border-radius

• Vista previa en vivo y CSS instantáneo: el generador actualiza la vista previa y la salida CSS con cada cambio, sin botones que pulsar. Ve exactamente cómo afecta cada radio de esquina a la forma y copia la declaración CSS con un clic.
• Controles uniformes y por esquina: cambia entre el modo uniforme (un único control deslizante para todas las esquinas) y el modo por esquina (valores independientes para cada esquina). Elige tu unidad: px para cajas estándar y % para formas elípticas.
• 100% privado, sin subir archivos: toda la generación de border-radius ocurre localmente en tu navegador. Tus decisiones de diseño nunca salen de tu dispositivo ni se envían a ningún servidor: seguro para proyectos de clientes y sistemas de diseño propietarios.
• Gratis y sin límites: genera estilos de border-radius ilimitados sin registro, sin suscripción y sin límites de uso. El generador es totalmente gratis para siempre y sin anuncios que bloqueen la interfaz.

• Diseño de tarjetas y componentes: los diseñadores de interfaz usan el generador para estilizar tarjetas, diálogos modales, tooltips y menús desplegables. La vista previa visual facilita encontrar el radio de esquina perfecto que encaje con el sistema de diseño, desde un sutil redondeo de 4 px hasta uno generoso de 16 px.
• Traspaso de diseño a código: los diseñadores usan el generador para extraer valores CSS exactos de los mockups visuales y entregárselos a los desarrolladores. Se acabó medir píxeles o adivinar: copia la declaración border-radius exacta y pégala en el código.
• Estilización de imágenes y avatares: los desarrolladores web usan el generador para estilizar avatares de perfil (circulares al 50%), imágenes de producto (redondeadas a 8-12 px) y galerías de miniaturas. El modo % crea formas elípticas y circulares perfectas para imágenes de cualquier proporción.
• Diseño de interfaces de apps móviles: los desarrolladores móviles usan el generador para estilizar formas de botones, bordes de tarjetas y cabeceras de hojas inferiores. El control por esquina permite formas asimétricas que siguen los patrones modernos de interfaz móvil, como el icono squircle al estilo iOS.
• Aprendizaje y experimentación con CSS: los desarrolladores frontend que aprenden CSS usan el generador para entender visualmente cómo funciona border-radius. La vista previa en vivo y los controles por esquina permiten ver cómo afecta cada valor a la forma final: una herramienta perfecta para aprender CSS.
• Estilización de botones y campos de formulario: los desarrolladores de experiencia de usuario usan el generador para estilizar botones, campos de entrada, barras de búsqueda y controles de formulario. Igualar el border-radius entre elementos de formulario relacionados crea coherencia visual y una experiencia pulida.

La propiedad CSS border-radius redondea las esquinas del borde exterior de un elemento. Puedes establecer un único radio para las cuatro esquinas (con un solo valor como border-radius: 8px), dos valores para pares diagonales (8px 16px) o cuatro valores para cada esquina individualmente (8px 4px 8px 4px). El orden es superior izquierda, superior derecha, inferior derecha e inferior izquierda, en sentido horario desde arriba. Nuestro generador de border-radius gestiona todos estos formatos y produce CSS limpio y listo para producción.

1. Elige tu modo de entrada: usa el modo Uniforme para controlar las cuatro esquinas con un único control deslizante, perfecto para un redondeo consistente. Cambia al modo Por esquina para definir cada esquina de forma independiente con entradas numéricas individuales dispuestas en una cuadrícula 2×2 que refleja la disposición del elemento.
2. Ajusta los valores y la unidad: arrastra el control deslizante o escribe los valores directamente. Cambia entre px (píxeles para redondeo de tamaño fijo) y % (porcentaje para formas elípticas/circulares). La vista previa se actualiza al instante, mostrando los valores exactos del radio de cada esquina superpuestos sobre el cuadro de vista previa.
3. Copia el CSS: haz clic en «Copiar CSS» para copiar la declaración CSS lista para producción a tu portapapeles. El generador produce el formato abreviado óptimo: un valor, dos valores o cuatro valores según la configuración de tus esquinas.

• px (píxeles): redondeo de tamaño fijo que no cambia al redimensionar el elemento. Usa px para componentes de interfaz estándar como botones, tarjetas y modales donde quieras un redondeo de esquinas consistente independientemente del tamaño. Los valores suelen ir de 2 px (sutil) a 24 px (muy redondeado).
• % (porcentaje): redondeo relativo que escala con el tamaño del elemento. Usa 50% para crear un círculo perfecto o una forma de píldora. Usa porcentajes menores para un redondeo elíptico que se adapta a distintas dimensiones. Los valores porcentuales se limitan al 50% para formas circulares.

La propiedad border-radius es compatible con todos los navegadores modernos sin prefijos de proveedor. También admite las variantes de propiedades lógicas border-start-start-radius y similares para compatibilidad con RTL y modos de escritura vertical. Para elementos circulares, usa 50%; para botones tipo píldora, usa un valor mayor que la altura del elemento (p. ej., 9999px), que se limita al radio máximo posible.