Crea esquinas redondeadas CSS perfectas con un editor visual en vivo. Ajusta cada esquina de forma independiente, elige unidades (px, %, em, rem) y copia CSS listo para usar al instante. 100% gratuito y del lado del cliente.
border-radius: 8px; El Generador de Radio de Borde CSS es una herramienta visual para crear esquinas redondeadas personalizadas en elementos HTML. En lugar de adivinar valores, esta herramienta te permite ajustar cada esquina de forma independiente — superior izquierda, superior derecha, inferior derecha e inferior izquierda — con tu elección de unidades (px, %, em, rem). Genera automáticamente la sintaxis CSS más compacta, utilizando notación abreviada cuando las esquinas son simétricas. Ya sea que necesites una tarjeta redondeada sutil, un círculo perfecto, un botón en forma de píldora o una forma orgánica de hoja, esta herramienta lo hace sencillo. Todo el procesamiento ocurre en tu navegador — no se envían datos a ningún lado.
La propiedad CSS border-radius redondea las esquinas del borde exterior de un elemento. Puedes establecer un solo radio para que todas las esquinas sean iguales, o establecer hasta cuatro valores para controlar cada esquina individualmente. Al usar valores porcentuales, el 50% crea un círculo perfecto o elipse dependiendo de la relación de aspecto del elemento.
Usa px para esquinas fijas pixel-perfectas (por ejemplo, 8px para tarjetas), % para tamaño relativo que escala con el elemento (por ejemplo, 50% para círculos), em/rem para esquinas que escalan con el tamaño de fuente. Para botones y tarjetas, px es el más común. Para formas responsivas, % funciona mejor.
CSS border-radius admite de 1 a 4 valores: 1 valor = todas las esquinas; 2 valores = superior-izquierda+inferior-derecha y superior-derecha+inferior-izquierda; 3 valores = superior-izquierda, superior-derecha+inferior-izquierda, inferior-derecha; 4 valores = superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda. Esta herramienta detecta automáticamente la simetría y genera la sintaxis más corta válida.
Sí. La sintaxis border-radius generada sigue el estándar CSS3 y funciona en todos los navegadores modernos incluyendo Chrome, Firefox, Safari, Edge y navegadores móviles. No se necesitan prefijos de proveedor para las versiones actuales de navegadores.