Generador de Border Radius
Genera valores CSS border-radius visualmente. Controla cada esquina independientemente y copia el codigo CSS.
Caracteristicas principales
- Control individual del radio de cada esquina
- Vincular/desvincular esquinas para valores uniformes
- Formas predefinidas (píldora, círculo, hoja, ticket)
- Copia del código CSS con un clic
Guide
La propiedad CSS border-radius controla el redondeo de las esquinas de un elemento. En su forma más simple, border-radius: 8px redondea las cuatro esquinas en 8 píxeles. En su forma más compleja, border-radius acepta ocho valores (cuatro radios horizontales y cuatro radios verticales separados por una barra) para crear esquinas asimétricas y elípticas que producen formas orgánicas no circulares. Esta guía cubre todos los aspectos de border-radius: sintaxis, efectos visuales, patrones comunes, consideraciones de rendimiento y aplicaciones de diseño. La sintaxis básica toma de uno a cuatro valores que representan el radio del círculo de cada esquina. Un valor se aplica a las cuatro esquinas: border-radius: 10px. Dos valores establecen superior-izquierda/inferior-derecha y superior-derecha/inferior-izquierda: border-radius: 10px 20px. Tres valores establecen superior-izquierda, superior-derecha/inferior-izquierda e inferior-derecha: border-radius: 10px 20px 30px. Cuatro valores establecen cada esquina individualmente en orden horario empezando desde la superior izquierda: border-radius: 10px 20px 30px 40px. También puedes apuntar a esquinas individuales con propiedades de escritura larga: border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius. Los valores en porcentaje crean efectos que escalan con el elemento. border-radius: 50% en un elemento cuadrado produce un círculo perfecto. En un elemento rectangular, el 50% produce una elipse. Esto se debe a que los valores en porcentaje son relativos a las dimensiones del elemento: los radios horizontales son porcentajes del ancho, los radios verticales son porcentajes del alto. Un elemento de 200px por 100px con border-radius: 50% tiene esquinas con un radio horizontal de 100px y un radio vertical de 50px, creando una elipse en lugar de un círculo. Esta relación dimensional es importante de entender al trabajar con diseños responsivos donde las proporciones del elemento cambian en distintos tamaños de viewport. La sintaxis con barra habilita esquinas elípticas donde los radios horizontales y verticales difieren. border-radius: 50px / 25px crea esquinas que se curvan más horizontalmente que verticalmente, produciendo un efecto ovalado estirado. La sintaxis completa de ocho valores es: border-radius: TL-h TR-h BR-h BL-h / TL-v TR-v BR-v BL-v, donde h es el radio horizontal y v es el radio vertical. Este nivel de control te permite crear formas orgánicas tipo mancha que serían difíciles de lograr de otro modo. Un valor como border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% produce una forma asimétrica y de aspecto natural usada a menudo en diseño web moderno para manchas decorativas, fondos de avatar y divisores de sección. Entender la geometría detrás de border-radius ayuda a predecir los resultados visuales. Cada esquina del elemento recibe una elipse (o un círculo si ambos radios son iguales) encajada en ella. El borde, el fondo y el contenido se recortan todos a este rectángulo redondeado. La elipse de cada esquina se define por su radio horizontal (extendiéndose a lo largo del borde superior o inferior) y su radio vertical (extendiéndose a lo largo del borde izquierdo o derecho). Cuando ambos radios son iguales, la esquina es un arco circular. Cuando difieren, la esquina es un arco elíptico. Visualizar esta elipse te ayuda a entender por qué ciertas combinaciones de valores producen formas inesperadas. Crear un círculo perfecto exige dos condiciones: el elemento debe ser cuadrado (ancho y alto iguales), y border-radius debe ser 50% o un valor igual a la mitad del tamaño del elemento. Si el elemento no es cuadrado, border-radius: 50% crea una elipse. Para fotos de perfil y avatares, asegura que el contenedor sea cuadrado usando valores iguales de ancho y alto, o usa aspect-ratio: 1 en CSS, luego aplica border-radius: 50%. Overflow: hidden en el contenedor recorta la imagen a la forma circular. Una alternativa es usar clip-path: circle(50%) que produce el mismo resultado visual. Las formas de pastilla (formas de estadio) son rectángulos con lados cortos completamente redondeados. Aplica border-radius con un valor igual o superior a la mitad del alto del elemento. Para un botón de 40px de alto, border-radius: 20px redondea los extremos en semicírculos. Usar un valor muy grande como border-radius: 9999px garantiza una forma de pastilla independientemente del alto del elemento, porque el navegador limita el radio a la mitad de la dimensión más pequeña. Esta técnica es común para etiquetas, insignias, botones y campos de entrada en el diseño moderno de interfaz. La forma de pastilla se ha convertido en el estilo de botón por defecto en muchos sistemas de diseño, incluidas las Human Interface Guidelines de Apple. Border-radius interactúa con varias otras propiedades CSS de formas que afectan al resultado renderizado. El borde en sí se ve afectado: la línea del borde sigue la esquina redondeada, manteniendo su grosor a lo largo de toda la curva. Outline no sigue border-radius en la mayoría de los navegadores, renderizándose como un rectángulo incluso cuando el elemento tiene esquinas redondeadas (aunque Firefox y las versiones más recientes de Chromium ya soportan contornos redondeados). Box-shadow sigue el border-radius, proyectando sombras redondeadas que coinciden con la forma del elemento. Overflow: hidden recorta el contenido hijo a la forma redondeada, lo cual es esencial para imágenes dentro de contenedores redondeados. Background-clip determina si el fondo se extiende bajo el borde hacia el área redondeada. El algoritmo de renderizado de border-radius resuelve conflictos cuando la suma de los radios adyacentes excede el espacio disponible. Si pones border-top-left-radius: 100px y border-top-right-radius: 100px en un elemento que solo tiene 150px de ancho, los dos radios suman 200px pero solo hay 150px disponibles. El navegador reduce proporcionalmente ambos radios para encajar. Específicamente, calcula un factor de escala (150/200 = 0,75) y lo aplica a ambos radios, resultando en 75px cada uno. Este ajuste automático significa que puedes usar valores de radio grandes sin preocuparte por el desbordamiento, aunque el resultado visual puede diferir de tu intención. El algoritmo considera las cuatro esquinas simultáneamente, encontrando el factor de escala más pequeño necesario. El border-radius anidado exige que los elementos interiores tengan radios más pequeños que sus padres para mantener un espaciado visual consistente. Si una tarjeta tiene border-radius: 16px y padding: 8px, el área de contenido interior debería tener border-radius: 8px (radio exterior menos padding). La fórmula es: radio interior = radio exterior - separación entre elementos. Si la separación es mayor que el radio exterior, el radio interior debería ser 0 (sin redondeo). Este principio se aplica a tarjetas que contienen imágenes, contenedores anidados y cualquier relación padre-hijo donde ambos tengan esquinas redondeadas. Ignorar esta regla crea anchos de separación inconsistentes en las esquinas que se ven visualmente mal aunque no puedas identificar inmediatamente por qué. Las formas CSS y border-radius sirven a propósitos diferentes que a veces se confunden. Border-radius redondea las esquinas visuales y el área de impacto de un elemento. CSS clip-path crea formas arbitrarias recortando (circle(), ellipse(), polygon(), path()). Para rectángulos redondeados simples, border-radius tiene mejor rendimiento y es más fácil de mantener. Para formas complejas (triángulos, hexágonos, polígonos personalizados), clip-path es necesario. Border-radius se compone en la GPU y es uno de los efectos visuales más baratos en CSS. Clip-path con polígonos complejos puede ser más costoso. La propiedad shape-outside usa border-radius para el ajuste de texto alrededor de elementos redondeados, creando diseños estilo revista. El rendimiento de border-radius es generalmente excelente. Las esquinas redondeadas son renderizadas por el compositor GPU en todos los navegadores modernos y no provocan recálculo de diseño ni repintado durante las animaciones. Animar el propio border-radius también es eficiente porque el navegador puede interpolar los valores y componer el resultado en la GPU. Esto hace que border-radius sea adecuado para efectos hover (transitar de esquinas cuadradas a redondeadas) y elementos animados. La única consideración de rendimiento es cuando border-radius se combina con box-shadow en muchos elementos, ya que cada sombra redondeada exige trabajo de composición adicional. El soporte de navegador para border-radius es universal en todos los navegadores modernos sin prefijos. Los prefijos -webkit-border-radius y -moz-border-radius no han sido necesarios desde aproximadamente 2012. Los únicos casos límite involucran la sintaxis con barra para esquinas elípticas, que se ha soportado en todas partes desde IE9. Si estás dando soporte a navegadores extremadamente antiguos (IE8), border-radius se degrada con elegancia: el elemento simplemente se renderiza con esquinas cuadradas. No se pierde funcionalidad, solo el redondeo visual. Las tendencias de diseño que involucran border-radius ciclan entre extremos. Los primeros años 2010 favorecieron el redondeo sutil de 3px a 5px. A mediados de los 2010 se volvió a las esquinas afiladas de 0px en el flat design. A finales de los 2010 volvió el redondeo suave con radios de 8px a 16px en material design e interfaces influenciadas por iOS. Los primeros 2020 introdujeron diseños superredondeados con radios de 20px+ y formas de mancha asimétricas. Las tendencias actuales favorecen el redondeo medio (8px a 16px) para componentes de interfaz y redondeo mayor (24px+) para tarjetas y contenedores, creando una sensación suave y accesible. La forma squircle (superelipse), que Apple usa para sus iconos de apps, ha ganado popularidad pero exige clip-path o SVG porque border-radius crea un arco circular estándar, no una superelipse. Los valores de border-radius consistentes en un sistema de diseño crean cohesión visual. Define una escala de tokens de radio: --radius-sm: 4px, --radius-md: 8px, --radius-lg: 16px, --radius-xl: 24px, --radius-full: 9999px. Aplica estos tokens de forma consistente: los botones usan --radius-md, las tarjetas usan --radius-lg, los avatares usan --radius-full, las pequeñas insignias usan --radius-sm. Este enfoque sistemático previene la inconsistencia visual de valores de radio aleatorios (6px aquí, 10px allá, 14px en otro sitio) que hace que los diseños se sientan poco pulidos. Muchos frameworks CSS (Tailwind, Chakra UI) incluyen escalas de radio predefinidas por esta razón. El border-radius responsivo puede lograrse usando clamp(), min() o media queries. Una tarjeta con border-radius: clamp(8px, 2vw, 24px) tiene un redondeo menor en pantallas pequeñas y mayor en pantallas anchas. Esto evita que los radios grandes dominen los elementos pequeños en móvil. Alternativamente, reduce border-radius en los puntos de interrupción móviles: border-radius: 24px en escritorio, 12px en tablet, 8px en móvil. Para tarjetas móviles de ancho completo que tocan los bordes de la pantalla, eliminar border-radius por completo en pantallas pequeñas (border-radius: 0 en el punto de interrupción móvil) es un patrón común que maximiza el área de contenido. Border-radius con imágenes exige overflow: hidden en el contenedor para recortar la imagen a la forma redondeada. Sin overflow: hidden, la imagen se extiende más allá de las esquinas redondeadas y el redondeo aparece solo en el fondo del contenedor. Un enfoque alternativo usa la propia imagen como background-image en un elemento redondeado. Para elementos <img>, la propiedad object-fit controla cómo la imagen rellena el contenedor redondeado: object-fit: cover rellena toda el área (recortando según sea necesario), mientras que object-fit: contain encaja toda la imagen dentro (potencialmente dejando huecos). Ambos enfoques funcionan, pero overflow: hidden en un contenedor con un <img> hijo es más común porque preserva el elemento img para accesibilidad (texto alt) y SEO. La creación avanzada de formas combina border-radius con otras propiedades CSS para crear formas complejas sin imágenes ni SVG. Una forma de huevo usa radios verticales asimétricos: border-radius: 50% / 60% 60% 40% 40%. Una forma de hoja usa redondeo de esquinas opuestas: border-radius: 0 50% 0 50%. Una forma de gota combina border-radius en tres esquinas con una cuarta esquina afilada. Un bocadillo usa border-radius en la forma principal con un pseudoelemento (::before o ::after) para la cola. Estas formas solo con CSS evitan la necesidad de SVG o imágenes para elementos decorativos simples, reduciendo las peticiones HTTP y habilitando un tematizado fácil de color a través de propiedades personalizadas CSS. Border-radius y el contenido de texto interactúan de formas específicas. El texto dentro de un elemento redondeado no sigue la curva. El texto se dispone en el cuadro de contenido rectangular, y las esquinas redondeadas recortan solo el fondo y el borde. Para valores de radio pequeños, esto no es perceptible. Para valores de radio grandes, el texto cerca de las esquinas puede parecer tener padding extra porque el fondo redondeado se retira del borde del contenido. Esta es una de las razones por las que los elementos con valores grandes de border-radius a menudo necesitan más padding que sus contrapartes cuadradas. Si pones border-radius: 24px en un botón, el padding debería ser de al menos 12px a 16px en los lados para que el texto no se aglomere visualmente contra el borde curvo. La animación de border-radius entre estados crea transiciones suaves de forma. Transitar de border-radius: 0 a border-radius: 50% en un elemento cuadrado lo transforma de cuadrado a círculo. Este efecto es popular para indicadores de carga, efectos hover y animaciones de revelado. CSS transition: border-radius 0.4s ease maneja la interpolación. Para morfing más complejo (transitar entre distintas formas asimétricas usando la sintaxis con barra), las transiciones CSS interpolan cada uno de los ocho valores de forma independiente, produciendo formas intermedias suaves. Las hojas de estilo de impresión y border-radius merecen consideración para aplicaciones web que los usuarios podrían imprimir. La mayoría de los navegadores modernos renderizan border-radius en impresión, pero algunas versiones antiguas no. Si tu diseño depende de esquinas redondeadas para el significado (no solo decoración), prueba la salida de impresión. Para facturas, recibos y otros documentos imprimibles, las esquinas redondeadas son decorativas y su ausencia en impresión no afecta a la usabilidad. Border-radius en frameworks CSS y bibliotecas de componentes se ha estandarizado a un enfoque basado en tokens. Tailwind CSS usa clases como rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl y rounded-full. Bootstrap usa rounded, rounded-circle, rounded-pill y rounded-0 hasta rounded-5. Chakra UI usa borderRadius con tamaños nombrados (sm, md, lg, xl, full). Entender cómo estos frameworks implementan border-radius te ayuda a migrar entre sistemas y personalizar los valores por defecto para que coincidan con tus requisitos de diseño. Los squircles (superelipses) son una forma que se parece a un rectángulo redondeado pero con una curva matemática diferente. Apple usa squircles para los iconos de apps de iOS. Un squircle tiene una curvatura más gradual en la transición del borde recto a la curva, produciendo un aspecto más suave que el arco circular estándar de border-radius. CSS border-radius no puede producir un squircle verdadero porque usa arcos circulares o elípticos. Para crear un squircle en CSS, necesitas clip-path con una función path() o una máscara SVG. La diferencia visual entre un rectángulo redondeado con border-radius y un squircle es sutil en tamaños pequeños pero perceptible en tamaños más grandes, especialmente en radios de esquina por encima de 20px. Las container queries y border-radius pueden trabajar juntas para un diseño de componente verdaderamente responsivo. Con CSS container queries (@container), puedes cambiar border-radius según el tamaño del contenedor en lugar del tamaño del viewport. Un componente de tarjeta con border-radius: 24px en un contenedor ancho puede cambiar a border-radius: 12px cuando se coloca en una barra lateral estrecha, independientemente del ancho general de la página. Esta responsividad a nivel de componente produce resultados visuales más consistentes que las media queries basadas en viewport por sí solas. Border-radius en elementos de tabla exige un manejo especial. Por defecto, border-radius en un elemento <table> no redondea las esquinas de celdas individuales. Para crear una tabla con esquinas exteriores redondeadas, pon border-collapse: separate (no collapse) en la tabla, aplica border-radius al elemento table, y oculta el desbordamiento con overflow: hidden. Para celdas redondeadas individuales, aplica border-radius a elementos <td> o <th> específicos. El border-top-left-radius va en la primera celda de la primera fila, border-top-right-radius en la última celda de la primera fila, y así sucesivamente. Este enfoque por celda es verboso pero da control preciso. Las funciones de temporización de transición afectan a cómo se sienten las animaciones de border-radius. Una transición lineal produce un redondeo mecánico y robótico. Una transición ease empieza rápido, se ralentiza en el medio y se acelera al final, produciendo una sensación natural. Una transición ease-in-out crea aceleración y desaceleración suaves. Para interfaces juguetonas, las funciones cubic-bezier pueden crear cambios de radio reboteantes o elásticos: transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) se pasa del valor objetivo antes de asentarse. Iguala la función de temporización al estilo general de animación de tu interfaz. CSS Houdini y la Paint API abren posibilidades futuras para border-radius más allá de lo que ofrece la especificación actual. Con Houdini, puedes crear worklets de pintura personalizados que dibujan cualquier forma de esquina que quieras: squircles, bordes festoneados, bordes ondulados y otras formas que el border-radius estándar no puede producir. Aunque el soporte de Houdini aún es limitado (principalmente navegadores Chromium), representa el futuro de las formas CSS personalizadas. Mientras tanto, los clip-paths y las máscaras SVG proporcionan alternativas multi-navegador para formas de esquina no estándar. Probar border-radius en distintas resoluciones de pantalla y densidades de píxel importa porque el renderizado de los bordes curvos difiere entre pantallas estándar (1x), Retina (2x) y de mayor densidad. En una pantalla 1x, un borde de 1px en una esquina redondeada puede parecer dentado. En una pantalla 2x, la misma esquina se renderiza de forma suave porque hay más píxeles físicos disponibles para representar la curva. Si tu público objetivo incluye usuarios en pantallas de baja densidad, comprueba que tus esquinas redondeadas se ven aceptables a resolución 1x. Los valores de radio más grandes se renderizan de forma más suave en todas las densidades porque la curva es más gradual. La herramienta generadora de border-radius te permite ajustar visualmente el radio horizontal y vertical de cada esquina de forma independiente, previsualizar el resultado en tiempo real y copiar el CSS. Esto es más rápido que adivinar valores en el código, particularmente para la sintaxis con barra donde la relación entre ocho valores y la salida visual no es intuitiva. Usa el generador para explorar formas asimétricas, encontrar los valores exactos que coinciden con tu intención de diseño y luego aplicar esos valores en tu hoja de estilos.
Preguntas frecuentes
¿Puedo establecer valores distintos para cada esquina?
Sí, puedes controlar de forma independiente las cuatro esquinas: superior izquierda, superior derecha, inferior derecha e inferior izquierda.
¿Qué unidades se usan?
La herramienta usa píxeles (px) por defecto, que puedes cambiar en la salida CSS según necesites.
