Borders, rings, and rounded corners
Border utilities include border, directional borders such as border-b, color utilities such as border-slate-200, and radius utilities such as rounded-lg or rounded-full. Rings are useful for emphasis and focus indicators because they draw an outline-like effect without changing the element's layout in the same way a border can.
Use a consistent radius scale. A large radius on every nested element can make a UI look overly soft; choose radii based on hierarchy, such as a larger page card and a smaller control inside it.
Layered card and focus ring
<div class="rounded-2xl border border-slate-200 bg-white p-5">
<div class="flex items-center justify-between">
<h2 class="font-semibold">Notifications</h2>
<button class="rounded-md px-2 py-1 text-sm text-slate-600 hover:bg-slate-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Manage</button>
</div>
<p class="mt-2 text-sm text-slate-600">You are all caught up.</p>
</div>đź’ˇ The outer card uses a larger radius and subtle border. The button has its own smaller radius and a visible focus outline. The hierarchy comes from surface, spacing, and shape together.
Key Takeaways
- Use a consistent radius and border scale.
- Focus rings must remain visible against surrounding surfaces.
- Do not rely on shadows alone to define component boundaries.