iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Borders & Radius

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Borders are utilities for border-width, colour, radius, and style. Tailwind exposes them per side (border-t, border-l) and as shortcuts (rounded-lg, divide-y).

Borders + radius + dividers + rings

EXAMPLE
<!-- 1) Width + colour -->
<div class="border border-slate-300">All-sides 1px</div>
<div class="border-2 border-emerald-500">2px brand</div>
<div class="border-t-4 border-b-4 border-slate-200">Top + bottom only</div>
<div class="border-l-4 border-emerald-500">Brand accent on the left</div>

<!-- 2) Border style -->
<div class="border-2 border-dashed border-slate-300">Dashed</div>
<div class="border-2 border-dotted border-slate-300">Dotted</div>
<div class="border-2 border-double border-slate-300">Double</div>

<!-- 3) Rounded corners -->
<div class="rounded">4px</div>
<div class="rounded-lg">8px</div>
<div class="rounded-xl">12px</div>
<div class="rounded-2xl">16px</div>
<div class="rounded-full">Pill / circle</div>
<div class="rounded-t-lg">Only top corners</div>
<div class="rounded-tl-xl rounded-br-xl">Diagonal corners</div>

<!-- 4) Divide — borders BETWEEN children (no last-child hack) -->
<ul class="divide-y divide-slate-200">
    <li class="p-3">Row 1</li>
    <li class="p-3">Row 2</li>
    <li class="p-3">Row 3</li>
</ul>

<div class="flex divide-x divide-slate-300">
    <div class="p-3">Left</div>
    <div class="p-3">Middle</div>
    <div class="p-3">Right</div>
</div>

<!-- 5) Ring — outline-style border (no layout shift, great for focus states) -->
<button class="px-4 py-2 rounded bg-emerald-500 text-white
              focus:outline-none focus:ring-2 focus:ring-emerald-300 focus:ring-offset-2">
    Focus me
</button>

<input class="px-3 py-2 border rounded
              focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent">

<!-- 6) Outline — different from ring (uses the native outline property) -->
<div class="outline outline-2 outline-offset-2 outline-emerald-500">Outlined</div>

Why it matters

ring-* avoids the layout shift that adding a border causes on focus. It’s the right answer for keyboard-accessible focus styles — visible without breaking the design.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="border border-slate-300 rounded-lg">…</div>
Try it Yourself »

Discussion

Loading…