Border Radius

Generador visual de border radius

Crear los bordes redondeados perfectos para tus componentes web no debería obligarte a adivinar números y actualizar el navegador constantemente. Este generador visual de border radius te permite ajustar los deslizadores y ver al instante cómo las curvas afectan a un elemento. Una vez que consigas el aspecto exacto que buscas, puedes copiar el código CSS optimizado directamente al portapapeles.

Como todos los cálculos y vistas previas se procesan de forma local en tu navegador, la herramienta es increíblemente rápida y totalmente privada. Ningún diseño ni clic se sube jamás a un servidor.

Domina los bordes redondeados en CSS

La propiedad border-radius es fundamental en el diseño web moderno y se usa para suavizar los bordes rectos de botones, imágenes, ventanas modales y contenedores. Aunque a simple vista parece sencilla, su sintaxis puede tener muchos matices cuando quieres modificar esquinas específicas.

Este generador de border-radius CSS te ayuda a entender y utilizar la sintaxis abreviada de CSS de forma eficaz. Cuando vinculas todas las esquinas, la herramienta devuelve un único valor (por ejemplo, border-radius: 16px;). Si las desvinculas para crear una forma personalizada, el generador formatea automáticamente el CSS en función de tus valores:

• Cuatro valores: Si todas las esquinas son diferentes, el CSS las aplica en el sentido de las agujas del reloj empezando por la superior izquierda (p. ej., border-radius: 16px 8px 4px 2px;).
• Dos valores: Si la esquina superior izquierda coincide con la inferior derecha, y la superior derecha coincide con la inferior izquierda, la herramienta simplifica el código de forma inteligente a dos valores (p. ej., border-radius: 16px 0;).

Píxeles vs. Porcentajes

Uno de los dilemas más comunes al escribir CSS para bordes redondeados es elegir la unidad adecuada. Esta herramienta te permite alternar fácilmente entre píxeles (px) y porcentajes (%), cada uno con un propósito distinto en el diseño UI.

Los píxeles (px) son unidades absolutas. Un radio de borde de 12px siempre se verá exactamente igual, ya sea que se aplique a un botón pequeño o a una imagen destacada enorme. Los píxeles son la opción estándar para componentes de UI como tarjetas, menús desplegables y campos de entrada, ya que mantienen un lenguaje de diseño consistente y uniforme en toda la aplicación. Esta herramienta permite valores en píxeles de hasta 200px.

Los porcentajes (%) son relativos al tamaño del propio elemento. Un radio de borde del 50% en un elemento cuadrado siempre creará un círculo perfecto, sin importar si ese cuadrado tiene 50 o 500 píxeles de ancho. Si el elemento es un rectángulo, el 50% creará una forma ovalada elíptica. Los porcentajes son ideales para elementos responsivos como avatares de perfil o formas decorativas de fondo. Esta herramienta limita los valores porcentuales al 50%, ya que los valores superiores no aumentan el efecto visual de redondeo en CSS.

Más allá de las esquinas básicas: un generador de formas CSS

Aunque se usa principalmente para un redondeo sutil, border-radius también es un potente generador de formas CSS. Al desvincular las esquinas y mezclar valores extremos, puedes crear formas geométricas únicas sin necesidad de archivos SVG ni de complejos clip-paths. La herramienta incluye varios ajustes preestablecidos para demostrarlo:

• Píldora: Al aplicar un valor en píxeles artificialmente alto (como 9999px) a todas las esquinas, creas una forma de "píldora" o estadio. Esto se usa mucho para insignias, etiquetas y botones de llamada a la acción modernos. El navegador limita el redondeo real exactamente a la mitad de la altura del elemento, garantizando semicírculos perfectos en los bordes.
• Círculo: Ajustar todas las esquinas al 50% transforma un cuadrado en un círculo perfecto.
• Hoja: Al ajustar las esquinas superior izquierda e inferior derecha a 0, y las esquinas superior derecha e inferior izquierda a un valor alto (como 48px), creas una forma de hoja asimétrica y orgánica.
• Pestaña: Al redondear solo las esquinas superior izquierda y superior derecha (p. ej., 16px) y dejar las esquinas inferiores en 0, creas la clásica forma de pestaña de carpeta, ideal para menús de navegación.

Perfecciona tus componentes de UI

Las esquinas redondeadas rara vez se usan de forma aislada; por lo general, forman parte de un sistema de diseño más amplio y cohesivo. Un componente de tarjeta bien diseñado, por ejemplo, combina un radio de borde sutil con profundidad y color para destacar en la página.

Una vez que hayas generado tu radio de borde ideal, puedes combinarlo con otros efectos CSS para completar tu diseño. Acompaña tu nueva forma con una sombra suave usando nuestro Generador de Box Shadow para crear un efecto elevado y flotante. Si estás diseñando un botón o un elemento decorativo de fondo, puedes aplicar un fondo vibrante con el Generador de degradados CSS, o encontrar los colores sólidos complementarios perfectos con el Generador de paletas de colores.