Generador Border Radius CSS Visual
Ajusta cada esquina del border-radius con sliders y obtén el código CSS listo para copiar y pegar.
border-radius: 16px;¿Necesitas algo más que esta herramienta? OCC te lo monta
No vendemos software de terceros: somos el equipo que ejecuta. Escríbenos por WhatsApp y te conectamos con el especialista o construimos lo que necesites.
Conectamos con diseñadores verificados para identidad visual, branding, web y assets para redes.
Te montamos un design system completo en Figma con tokens, componentes y guía de marca.
¿Qué es border-radius en CSS?
La propiedad border-radius en CSS define el radio de las esquinas redondeadas de un elemento HTML. Es una de las propiedades visuales más usadas en diseño web moderno: prácticamente cada botón, card, modal, input y contenedor lleva algún grado de border-radius. Permite suavizar la apariencia rectangular y dar personalidad al diseño. Acepta valores en píxeles (px), porcentajes (%), em, rem o ch. Cada esquina puede tener un radio distinto, lo que abre infinitas posibilidades creativas. Nuestra calculadora de border-radius visual te permite ajustar las cuatro esquinas independientemente con sliders, ver el resultado en tiempo real y copiar el CSS al instante.
Sintaxis de border-radius
Una sola esquina (todas iguales): border-radius: 16px;
Dos valores (sup-izq/inf-der y sup-der/inf-izq): border-radius: 16px 8px;
Cuatro valores en sentido horario desde sup-izq: border-radius: 16px 0 16px 0; da una "ficha de dominó" diagonal.
Esquinas individuales: border-top-left-radius: 16px; border-bottom-right-radius: 8px; etc.
Forma circular completa: border-radius: 50%; en elementos cuadrados crea círculos perfectos.
Valores típicos y sus usos
0px: esquina recta clásica. Estilo minimalista, "industrial".
2-4px: sutil. Bootstrap usa 4px por defecto en botones. Apariencia neutra.
8-12px: moderno y amigable. Tailwind UI, Vercel, muchos productos SaaS.
16-24px: más expresivo. Apps móviles iOS y Android usan este rango habitualmente.
50%: círculo perfecto. Avatares, iconos circulares, botones "pill" si se aplica a elemento ancho.
9999px (o cualquier valor enorme): equivale a "pill shape" en elementos no cuadrados. Se ajusta automáticamente al alto del elemento.
Tendencias de diseño 2026
Neumorfismo: radios grandes (20-40px) con sombras suaves. Estilo "blando".
Glassmorphism: radios moderados (12-20px) combinados con backdrop-filter blur. Apple, Vista, Stripe.
Bento grids: tarjetas cuadradas con radios homogéneos (16-24px) en grids irregulares. Apple, Linear, Notion.
Brutalism revival: esquinas 0px, contraste alto, sin redondear. Estética alternativa minimalista.
Squircles: figuras "casi cuadradas" pero suavizadas. Apple usa esto en sus iconos iOS, técnicamente no es border-radius sino mask-image más complejo.
Border-radius elíptico
Además de radios circulares, CSS permite radios elípticos usando "/" para separar el eje horizontal del vertical: border-radius: 50px / 25px; crea óvalos planos. Esto se usa raramente pero permite efectos únicos como "hojas" o "ojos".
Preguntas frecuentes
¿Cuál es el valor de border-radius "estándar" para botones?
Depende del estilo de tu diseño. Bootstrap: 4-6px. Material Design (Google): 4-8px. iOS / Apple: 8-12px. Diseños modernos tipo Vercel/Linear: 6-10px. No hay valor universal, sigue tu sistema de diseño.
¿Cómo hacer un círculo perfecto?
border-radius: 50% en un elemento cuadrado (width = height). Si el elemento es rectangular, 50% creará un óvalo, no un círculo. Para un avatar circular: width: 60px; height: 60px; border-radius: 50%;
¿Y un botón con bordes "pill"?
border-radius: 9999px (o cualquier valor mayor que la mitad del alto). El navegador limita el radio máximo automáticamente al 50% del alto del elemento. Resultado: pill shape perfecto independiente del ancho.
¿Funciona en todos los navegadores?
Sí, en todos los modernos desde 2010. No requiere prefijos hace años (-webkit-border-radius, -moz-border-radius son legacy innecesarios).
¿Mis datos se almacenan?
No. La generación se ejecuta en tu navegador. Los valores que ajustes no se transmiten a servidores externos.
Herramientas relacionadas: Box Shadow CSS, Gradiente CSS, Flexbox CSS.
Revisado por Javier Andreo