Tailwind Borders and Shadows
Borders and shadows make elements stand out on a page. Tailwind CSS gives you utility classes to add, resize, color, and round borders — and to add depth with box shadows — without writing a single line of custom CSS.
What Are Borders in Tailwind?
A border is a line drawn around an element. Think of it like a picture frame around a photo. Tailwind uses short class names to control every part of that frame.
The Border Width Classes
Border width controls how thick the border line is.
<!-- No border -->
<div class="border-0">No border</div>
<!-- 1px border (default) -->
<div class="border">Default border</div>
<!-- 2px border -->
<div class="border-2">Thicker border</div>
<!-- 4px border -->
<div class="border-4">Even thicker</div>
<!-- 8px border -->
<div class="border-8">Very thick border</div>Visual Diagram — Border Width Scale
border-0 → [ ] ← no line
border → [__________] ← 1px line
border-2 → [══════════] ← 2px line
border-4 → [══════════] ← 4px line
border-8 → [▓▓▓▓▓▓▓▓▓▓] ← 8px lineBorder on Specific Sides
You can add a border to just one side of an element. This is useful for underlines or left accent bars.
<div class="border-t">Top border only</div>
<div class="border-b">Bottom border only</div>
<div class="border-l">Left border only</div>
<div class="border-r">Right border only</div>
<!-- Combine sides -->
<div class="border-t border-b">Top and bottom borders</div>Side Shorthand Reference
t = top
b = bottom
l = left
r = right
x = left + right
y = top + bottomBorder Colors
After setting the width, pick a color. Tailwind uses the same color palette as text and background utilities.
<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue border</div>
<div class="border-4 border-red-600">Red border</div>
<div class="border border-transparent">Invisible border (holds space)</div>Color Shades Guide
Each color has shades from 50 (very light) to 950 (very dark).
border-blue-100 → very pale blue
border-blue-300 → light blue
border-blue-500 → medium blue (standard)
border-blue-700 → dark blue
border-blue-900 → very dark blueBorder Style
The border style controls whether the line is solid, dashed, dotted, or invisible.
<div class="border border-solid">Solid line</div>
<div class="border border-dashed">Dashed line</div>
<div class="border border-dotted">Dotted line</div>
<div class="border border-double">Double line</div>
<div class="border border-none">No line</div>Visual Style Comparison
border-solid → ────────────
border-dashed → ── ── ── ──
border-dotted → · · · · · ·
border-double → ════════════Border Radius (Rounded Corners)
Border radius rounds the sharp corners of an element. Like sanding the corners of a wooden box.
<div class="rounded-none">Sharp corners</div>
<div class="rounded-sm">Slightly rounded</div>
<div class="rounded">Default rounded</div>
<div class="rounded-md">Medium rounded</div>
<div class="rounded-lg">Large rounded</div>
<div class="rounded-xl">Extra large</div>
<div class="rounded-2xl">2x extra large</div>
<div class="rounded-3xl">3x extra large</div>
<div class="rounded-full">Pill shape / circle</div>Rounding Specific Corners
You can round just one corner or one side.
<!-- Individual corners -->
<div class="rounded-tl-lg">Top-left only</div>
<div class="rounded-tr-lg">Top-right only</div>
<div class="rounded-bl-lg">Bottom-left only</div>
<div class="rounded-br-lg">Bottom-right only</div>
<!-- Sides -->
<div class="rounded-t-lg">Top two corners</div>
<div class="rounded-b-lg">Bottom two corners</div>Corner Position Map
┌─ tl ────── tr ─┐
│ │
│ │
└─ bl ────── br ─┘
tl = top-left
tr = top-right
bl = bottom-left
br = bottom-rightWhat Are Box Shadows in Tailwind?
A box shadow creates the illusion that an element is floating above the page. Like holding a flashlight above a box — it casts a shadow below it.
Shadow Size Classes
<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-2xl">Double extra large shadow</div>
<div class="shadow-inner">Shadow goes inward</div>Shadow Depth Diagram
shadow-none → [Card]
(no depth)
shadow-sm → [Card]
░
shadow → [Card]
░░
shadow-md → [Card]
░░░
shadow-lg → [Card]
░░░░
shadow-2xl → [Card]
░░░░░░
(deeper shadow = element looks higher off the page)Colored Shadows
Tailwind v3+ allows you to tint the shadow with a color. Pair shadow-lg with shadow-blue-500/50 to get a semi-transparent blue shadow.
<div class="shadow-lg shadow-blue-500/50">Blue shadow card</div>
<div class="shadow-lg shadow-red-400/40">Red shadow card</div>
<div class="shadow-xl shadow-purple-600/30">Purple shadow card</div>The /50 part means 50% opacity.
Outline vs Border
An outline sits outside the border and does not affect layout. It is mostly used for accessibility focus indicators.
<button class="outline outline-2 outline-blue-500">Outlined button</button>
<button class="outline-none">No outline (remove default)</button>
<button class="ring-2 ring-blue-500">Ring focus style</button>Ring Utilities
Ring is Tailwind's own system for focus borders. It uses box-shadow under the hood and does not break layouts.
<input class="ring-1 ring-gray-300 focus:ring-2 focus:ring-blue-500">
<!-- Ring width -->
ring-0 → no ring
ring-1 → 1px ring
ring-2 → 2px ring
ring-4 → 4px ring
ring-8 → 8px ring
<!-- Ring color -->
ring-blue-500
ring-green-400
ring-red-300Practical Card Example
Here is a real-world card that uses borders, rounded corners, and a shadow together.
<div class="border border-gray-200 rounded-xl shadow-md p-6 bg-white">
<h3 class="text-lg font-semibold text-gray-800">Product Card</h3>
<p class="text-gray-500 mt-2">This card has a light border, rounded corners, and a medium shadow.</p>
<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg shadow-sm">
Buy Now
</button>
</div>What Each Class Does in This Example
border → adds 1px border
border-gray-200 → light gray color for border
rounded-xl → large rounded corners
shadow-md → medium floating shadow
p-6 → padding inside the card
bg-white → white backgroundDivider Lines Using Borders
You can fake a horizontal or vertical divider using a border on just one side of an empty element or a spacer.
<!-- Horizontal line -->
<div class="border-t border-gray-200 my-4"></div>
<!-- Vertical line inside a flex row -->
<div class="flex items-center gap-4">
<span>Home</span>
<div class="border-l border-gray-300 h-4"></div>
<span>About</span>
</div>Divide Utilities
When you have a list of items, use divide classes to draw a border between each item automatically.
<ul class="divide-y divide-gray-200">
<li class="py-3">Item One</li>
<li class="py-3">Item Two</li>
<li class="py-3">Item Three</li>
</ul>How Divide Works
┌─────────────────┐
│ Item One │
├─────────────────┤ ← divide-y adds border here
│ Item Two │
├─────────────────┤ ← and here
│ Item Three │
└─────────────────┘divide-x adds vertical lines between items in a horizontal row.
Quick Reference Table
TASK CLASS EXAMPLE
─────────────────────────────────────────────
Add 1px border border
Make border blue border-blue-500
Dashed border border-dashed
Round all corners rounded-lg
Round top corners only rounded-t-lg
Make a pill/circle rounded-full
Add medium shadow shadow-md
Add inner shadow shadow-inner
Remove shadow shadow-none
Add colored shadow shadow-lg shadow-pink-500/40
Add focus ring ring-2 ring-blue-500
Dividers between list items divide-y divide-gray-200Common Mistakes to Avoid
Forgetting to Set Border Width
If you write only border-blue-500 without border, no border appears. The color needs a width to show up.
<!-- Wrong: color with no width -->
<div class="border-blue-500">No border visible</div>
<!-- Correct: width + color -->
<div class="border border-blue-500">Blue border visible</div>Using Outline for Layout Borders
Outline does not take up space in the layout. Use border when you need the element size to include the line. Use outline or ring only for focus or accessibility indicators.