Borders and Radius
Border utilities add or remove borders, control individual sides, set contextual border colors, and shape corners.
Core concept
Explain border, border-0, border-top/bottom/start/end, border color utilities, rounded, rounded-circle, and rounded-pill. Show how radius changes the visual language of cards, avatars, tags, and controls.
Using it in a real interface
Use a card with a subtle border, an avatar with a circular crop, and a status pill. Explain that radius should support the product\'s visual hierarchy rather than be applied to every element automatically.
Implementation notes
Remember that borders affect available space and visual density. If a component uses a border as its primary separator, consider whether a background or spacing distinction would be clearer.
ADVERTISEMENT