Borders, Rings & Radius in Tailwind CSS
From the Tailwind CSS cheat sheet · Backgrounds & Borders · verified Jul 2026
Borders, Rings & Radius
Border styling, focus rings, outlines, and rounded corners.
html
<!-- Border -->
<div class="border border-gray-300">Default border</div>
<div class="border-2 border-blue-500">Thick colored</div>
<div class="border-b border-gray-200">Bottom only</div>
<!-- Rounded corners -->
<div class="rounded">Small radius</div>
<div class="rounded-lg">Large radius</div>
<div class="rounded-full">Pill/circle</div>
<!-- Ring (focus indicator) -->
<button class="ring-2 ring-blue-500">Ring</button>
<input class="focus:ring-2 focus:ring-blue-500" />💡 ring-2 creates a focus ring using box-shadow — doesn't affect layout like border does
⚡ Use ring-offset-2 to add space between the element and its ring
📌 rounded-full on a square element creates a circle; on a rectangle creates a pill
🟢 inset-ring puts the ring inside the element — useful for image borders
bordersringsradiusoutline
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.