Sin radio
El elemento conserva esquinas totalmente rectas.
Ejemplo visual
Radius
Radius reúne los helpers de esquinas redondeadas del sistema para construir interfaces consistentes en cards, botones, bloques y elementos UI.
Qué resuelve radius
El módulo radius define cómo se redondean las esquinas dentro del sistema. Su función es mantener una lógica visual consistente en lugar de usar valores arbitrarios en cada componente.
Radius no define bordes, sombras ni decoración del proyecto. Solo controla la curvatura de las esquinas como parte de la forma del elemento.
Referencia del archivo
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: 0.25rem; }
.rounded { border-radius: 0.5rem; }
.rounded-lg { border-radius: 1rem; }
.rounded-xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }Niveles del sistema
Radio pequeño
Útil para elementos discretos o piezas con curvatura mínima.
Ejemplo visual
Radio base
Es una curvatura equilibrada para la mayoría de elementos UI.
Ejemplo visual
Radio grande
Funciona bien para cards, paneles o módulos con presencia visual mayor.
Ejemplo visual
Radio amplio
Ideal para bloques más suaves o interfaces con lenguaje visual más abierto.
Ejemplo visual
Radio total
Convierte el elemento en píldora o forma circular si sus dimensiones lo permiten.
Ejemplo visual
Ejemplos de uso
<article class="docs-card rounded-lg">
...
</article><a href="#" class="docs-btn rounded-full">
Acción
</a><div class="rounded-xl p-5">
...
</div>Cuándo usar cada nivel
- rounded-none → cuando el lenguaje visual requiere rigidez total.
- rounded-sm → controles discretos, bloques mínimos, tablas o superficies técnicas.
- rounded → radio base del sistema para elementos generales.
- rounded-lg → cards, paneles, módulos destacados.
- rounded-xl → bloques amplios, superficies suaves, layouts con más aire.
- rounded-full → botones píldora, badges, chips, avatares.
Consistencia visual
Sí hacer
- Repetir pocos niveles de radio en todo el sistema.
- Usar rounded-lg o rounded-xl como lenguaje consistente de cards.
- Reservar rounded-full para casos específicos de forma.
Evitar
- Combinar demasiados radios distintos en una misma interfaz.
- Usar radios arbitrarios fuera del sistema.
- Confundir radio con borde o sombra.
Qué sí y qué no va en radius
Qué sí debe contener
- Helpers de border-radius.
- Escalas consistentes de curvatura.
- Valores reutilizables para formas del sistema.
Qué no debe contener
- Border styles.
- Shadows.
- Backgrounds del proyecto.
- Componentes visuales completos.
Siguiente paso
Continúa con visibility para revisar el control responsive de visibilidad.