Borders and rounded corners are essential design elements that add polish and definition to your interfaces. Tailwind provides comprehensive border utilities for controlling width, style, color, and radius. In this lesson, you'll learn to create cards, buttons, inputs, and other UI components with perfectly styled borders and rounded corners.
Border Width
Control the thickness of borders with border width utilities:
All Sides
HTML
<!-- No border -->
<div class="border-0">No border</div>
<!-- Default border (1px) -->
<div class="border">1px border on all sides</div>
<!-- 2px border -->
<div class="border-2">2px border</div>
<!-- 4px border -->
<div class="border-4">4px border</div>
<!-- 8px border -->
<div class="border-8">8px border</div>Available border widths:
border-0- No borderborder- 1px border (default)border-2- 2px borderborder-4- 4px borderborder-8- 8px border
Individual Sides
HTML
<!-- Top border only -->
<div class="border-t-4 border-blue-500">
Thick top border
</div>
<!-- Right border only -->
<div class="border-r-2 border-green-500">
Right border
</div>
<!-- Bottom border only -->
<div class="border-b border-gray-300">
Bottom border
</div>
<!-- Left border only -->
<div class="border-l-4 border-purple-500">
Left border accent
</div>
<!-- Combine multiple sides -->
<div class="border-t border-b border-gray-200">
Top and bottom borders
</div>
<div class="border-l-4 border-r-4 border-blue-500">
Left and right borders
</div>Horizontal and Vertical
HTML
<!-- Horizontal borders (top and bottom) -->
<div class="border-y border-gray-300">
Top and bottom borders
</div>
<!-- Vertical borders (left and right) -->
<div class="border-x border-gray-300">
Left and right borders
</div>
<!-- Different widths -->
<div class="border-x-2 border-y-4 border-blue-500">
2px vertical, 4px horizontal
</div>Border Side Utilities
border-t- Topborder-r- Rightborder-b- Bottomborder-l- Leftborder-x- Horizontal (left + right)border-y- Vertical (top + bottom)
🎨 Common Border Width Patterns
border- Subtle borders for cards, inputsborder-2- Medium borders for emphasisborder-4orborder-8- Accent borders, focus indicatorsborder-l-4- Left accent for quotes, alerts
Border Color
You've already seen border colors in the previous lesson. Here's a comprehensive overview:
HTML
<!-- Basic border colors -->
<div class="border-2 border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue border</div>
<div class="border-2 border-red-500">Red border</div>
<div class="border-2 border-green-500">Green border</div>
<!-- Light borders for subtle separation -->
<div class="border border-gray-200">Very subtle border</div>
<!-- Dark borders for definition -->
<div class="border-2 border-gray-800">Strong border</div>
<!-- Transparent borders (for consistent spacing) -->
<div class="border-2 border-transparent hover:border-blue-500">
Border appears on hover
</div>
<!-- Individual side colors -->
<div class="border-t-2 border-t-blue-500 border-b-2 border-b-purple-500">
Different colors per side
</div>Border Color with Opacity
HTML
<!-- Semi-transparent borders -->
<div class="border-2 border-black/10">
10% opacity black border
</div>
<div class="border-2 border-blue-500/50">
50% opacity blue border
</div>
<div class="border-2 border-gray-900/25">
25% opacity border
</div>Current Color Border
HTML
<!-- Border inherits text color -->
<div class="text-blue-600 border-2 border-current">
Border matches text color
</div>
<div class="text-red-500 border-4 border-current">
Red text, red border
</div>Border Style
Change the style of borders beyond the default solid:
HTML
<!-- Solid border (default) -->
<div class="border-2 border-solid border-gray-300">
Solid border
</div>
<!-- Dashed border -->
<div class="border-2 border-dashed border-gray-400">
Dashed border
</div>
<!-- Dotted border -->
<div class="border-2 border-dotted border-gray-400">
Dotted border
</div>
<!-- Double border -->
<div class="border-4 border-double border-gray-400">
Double border
</div>
<!-- Hidden border -->
<div class="border-2 border-hidden">
Hidden border
</div>
<!-- No border style -->
<div class="border-2 border-none">
No border
</div>Practical Border Style Uses
HTML
<!-- Coupon or ticket edge -->
<div class="border-2 border-dashed border-gray-400 rounded-lg p-6">
<p class="text-lg font-bold">20% OFF</p>
<p class="text-sm text-gray-600">Use code: SAVE20</p>
</div>
<!-- File upload drop zone -->
<div class="border-2 border-dashed border-blue-400 bg-blue-50 rounded-lg p-12 text-center">
<p class="text-blue-600">Drop files here to upload</p>
</div>
<!-- Dotted separator -->
<div class="border-t-2 border-dotted border-gray-300 my-8"></div>
<!-- Double border for emphasis -->
<div class="border-4 border-double border-purple-500 p-6">
<h3 class="text-xl font-bold">Featured Content</h3>
</div>Border Radius (Rounded Corners)
Create rounded corners with rounded utilities:
All Corners
HTML
<!-- No rounding -->
<div class="rounded-none">Sharp corners</div>
<!-- Small rounding (2px) -->
<div class="rounded-sm">2px rounded corners</div>
<!-- Default rounding (4px) -->
<div class="rounded">4px rounded corners</div>
<!-- Medium rounding (6px) -->
<div class="rounded-md">6px rounded corners</div>
<!-- Large rounding (8px) -->
<div class="rounded-lg">8px rounded corners</div>
<!-- Extra large (12px) -->
<div class="rounded-xl">12px rounded corners</div>
<!-- 2XL (16px) -->
<div class="rounded-2xl">16px rounded corners</div>
<!-- 3XL (24px) -->
<div class="rounded-3xl">24px rounded corners</div>
<!-- Full rounding (9999px - makes circles/pills) -->
<div class="rounded-full">Fully rounded</div>Rounded Scale
rounded-none- 0pxrounded-sm- 2pxrounded- 4pxrounded-md- 6pxrounded-lg- 8pxrounded-xl- 12pxrounded-2xl- 16pxrounded-3xl- 24pxrounded-full- 9999px
Individual Corners
HTML
<!-- Top-left corner -->
<div class="rounded-tl-lg">Top-left rounded</div>
<!-- Top-right corner -->
<div class="rounded-tr-lg">Top-right rounded</div>
<!-- Bottom-right corner -->
<div class="rounded-br-lg">Bottom-right rounded</div>
<!-- Bottom-left corner -->
<div class="rounded-bl-lg">Bottom-left rounded</div>
<!-- Combine multiple corners -->
<div class="rounded-tl-2xl rounded-br-2xl">
Diagonal corners rounded
</div>Corner Groups
HTML
<!-- Top corners -->
<div class="rounded-t-lg">Top corners rounded</div>
<!-- Right corners -->
<div class="rounded-r-lg">Right corners rounded</div>
<!-- Bottom corners -->
<div class="rounded-b-lg">Bottom corners rounded</div>
<!-- Left corners -->
<div class="rounded-l-lg">Left corners rounded</div>
<!-- Start corners (left in LTR) -->
<div class="rounded-s-lg">Start corners rounded</div>
<!-- End corners (right in LTR) -->
<div class="rounded-e-lg">End corners rounded</div>Practical Rounded Examples
HTML
<!-- Circle/avatar -->
<img
src="avatar.jpg"
alt="User"
class="w-16 h-16 rounded-full object-cover"
>
<!-- Pill-shaped button -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-full hover:bg-blue-600">
Pill Button
</button>
<!-- Card with rounded corners -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold mb-2">Card Title</h3>
<p class="text-gray-600">Card content...</p>
</div>
<!-- Image with only top corners rounded -->
<div class="overflow-hidden rounded-t-lg">
<img src="image.jpg" alt="Card image" class="w-full h-48 object-cover">
</div>
<div class="bg-white p-4">
<p>Content below image</p>
</div>
<!-- Tag/badge with rounded corners -->
<span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-md text-sm font-semibold">
New
</span>
<!-- Heavily rounded box -->
<div class="bg-purple-500 text-white p-8 rounded-3xl">
<h2 class="text-2xl font-bold">Soft Corners</h2>
</div>Outline Utilities
Outlines are similar to borders but don't affect layout (they're outside the box model):
HTML
<!-- Outline width -->
<div class="outline outline-1 outline-blue-500">
1px outline
</div>
<div class="outline outline-2 outline-green-500">
2px outline
</div>
<div class="outline outline-4 outline-red-500">
4px outline
</div>
<div class="outline outline-8 outline-purple-500">
8px outline
</div>
<!-- Outline style -->
<div class="outline outline-dashed outline-2 outline-gray-400">
Dashed outline
</div>
<div class="outline outline-dotted outline-2 outline-gray-400">
Dotted outline
</div>
<!-- Outline offset (space between element and outline) -->
<div class="outline outline-2 outline-blue-500 outline-offset-2">
2px offset
</div>
<div class="outline outline-2 outline-green-500 outline-offset-4">
4px offset
</div>
<div class="outline outline-2 outline-purple-500 outline-offset-8">
8px offset
</div>
<!-- No outline -->
<button class="outline-none bg-blue-500 text-white px-6 py-3">
No outline (removes focus ring)
</button>Focus States with Outlines
HTML
<!-- Remove default outline, add custom focus ring -->
<button class="outline-none focus:ring-4 focus:ring-blue-300 bg-blue-500 text-white px-6 py-3 rounded-lg">
Custom focus state
</button>
<!-- Focus with outline offset -->
<button class="outline-none focus:outline focus:outline-2 focus:outline-blue-500 focus:outline-offset-2 bg-blue-500 text-white px-6 py-3 rounded-lg">
Focus with offset outline
</button>Accessibility Warning: Never use outline-none without providing an alternative focus indicator! Users who navigate with keyboards need visible focus states.
Divide Utilities
Add borders between child elements automatically:
HTML
<!-- Vertical dividers (between stacked elements) -->
<div class="divide-y divide-gray-200">
<div class="py-4">Item 1</div>
<div class="py-4">Item 2</div>
<div class="py-4">Item 3</div>
<div class="py-4">Item 4</div>
</div>
<!-- Horizontal dividers (between inline elements) -->
<div class="flex divide-x divide-gray-300">
<div class="px-4">Column 1</div>
<div class="px-4">Column 2</div>
<div class="px-4">Column 3</div>
</div>
<!-- Divide with different widths -->
<div class="divide-y-2 divide-blue-300">
<div class="py-4">Thicker divider</div>
<div class="py-4">Between items</div>
</div>
<!-- Divide with style -->
<div class="divide-y divide-dashed divide-gray-400">
<div class="py-4">Dashed divider</div>
<div class="py-4">Between items</div>
</div>
<!-- Reverse divide (for RTL or special cases) -->
<div class="divide-y divide-y-reverse divide-gray-200">
<div class="py-4">Item 1</div>
<div class="py-4">Item 2</div>
</div>Practical Divide Examples
HTML
<!-- List with dividers -->
<ul class="divide-y divide-gray-200">
<li class="py-4">
<div class="flex items-center gap-4">
<img src="avatar1.jpg" alt="User" class="w-12 h-12 rounded-full">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-sm text-gray-600">john@example.com</p>
</div>
</div>
</li>
<li class="py-4">
<div class="flex items-center gap-4">
<img src="avatar2.jpg" alt="User" class="w-12 h-12 rounded-full">
<div>
<p class="font-semibold">Jane Smith</p>
<p class="text-sm text-gray-600">jane@example.com</p>
</div>
</div>
</li>
</ul>
<!-- Breadcrumb navigation -->
<nav class="flex divide-x divide-gray-400 text-sm">
<a href="#" class="px-3 hover:text-blue-600">Home</a>
<a href="#" class="px-3 hover:text-blue-600">Products</a>
<a href="#" class="px-3 hover:text-blue-600">Category</a>
<span class="px-3 text-gray-600">Item</span>
</nav>
<!-- Stats with dividers -->
<div class="grid grid-cols-3 divide-x divide-gray-300 bg-white rounded-lg shadow p-6">
<div class="px-6 text-center">
<p class="text-3xl font-bold text-gray-900">1,234</p>
<p class="text-sm text-gray-600">Users</p>
</div>
<div class="px-6 text-center">
<p class="text-3xl font-bold text-gray-900">567</p>
<p class="text-sm text-gray-600">Projects</p>
</div>
<div class="px-6 text-center">
<p class="text-3xl font-bold text-gray-900">89</p>
<p class="text-sm text-gray-600">Teams</p>
</div>
</div>Interactive Border Explorer
Experiment with border utilities:
Border & Rounded Corners Explorer
Try different border widths, colors, and rounded corners
Utilities
Current Classes:
bg-white p-8 w-64 h-64 flex items-center justify-center text-gray-700 font-semiboldPreview
Border Box
Practical Border Examples
Example 1: Card Variations
HTML
<!-- Simple card with border -->
<div class="bg-white border border-gray-200 rounded-lg p-6">
<h3 class="text-xl font-bold mb-2">Simple Card</h3>
<p class="text-gray-600">Clean card with subtle border</p>
</div>
<!-- Card with thick border -->
<div class="bg-white border-4 border-blue-500 rounded-lg p-6">
<h3 class="text-xl font-bold text-blue-900 mb-2">Featured Card</h3>
<p class="text-gray-600">Emphasized with thick border</p>
</div>
<!-- Card with left accent -->
<div class="bg-white border-l-4 border-purple-500 rounded-lg p-6 shadow">
<h3 class="text-xl font-bold mb-2">Accent Card</h3>
<p class="text-gray-600">Left accent for visual interest</p>
</div>
<!-- Card with gradient border -->
<div class="p-[2px] bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg">
<div class="bg-white rounded-lg p-6">
<h3 class="text-xl font-bold mb-2">Gradient Border</h3>
<p class="text-gray-600">Simulated gradient border effect</p>
</div>
</div>
<!-- Dashed border card (coupon style) -->
<div class="bg-blue-50 border-2 border-dashed border-blue-400 rounded-lg p-6">
<p class="text-2xl font-bold text-blue-900 mb-2">50% OFF</p>
<p class="text-sm text-blue-700">Limited time offer!</p>
</div>Example 2: Button Styles
HTML
<!-- Solid button -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg transition">
Solid Button
</button>
<!-- Outline button -->
<button class="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-semibold px-6 py-3 rounded-lg transition">
Outline Button
</button>
<!-- Ghost button -->
<button class="text-blue-600 hover:bg-blue-50 font-semibold px-6 py-3 rounded-lg transition">
Ghost Button
</button>
<!-- Pill button -->
<button class="bg-purple-600 hover:bg-purple-700 text-white font-semibold px-8 py-3 rounded-full transition">
Pill Button
</button>
<!-- Icon button (circle) -->
<button class="w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full flex items-center justify-center transition">
×
</button>
<!-- Button with border and shadow -->
<button class="bg-white border-2 border-gray-300 hover:border-gray-400 text-gray-700 font-semibold px-6 py-3 rounded-lg shadow hover:shadow-md transition">
Bordered Shadow
</button>Example 3: Input Fields
HTML
<!-- Basic input -->
<input
type="text"
class="border border-gray-300 rounded-lg px-4 py-2 w-full focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
placeholder="Enter text"
>
<!-- Input with icon -->
<div class="relative">
<input
type="email"
class="border border-gray-300 rounded-lg pl-10 pr-4 py-2 w-full focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
placeholder="Email address"
>
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
</svg>
</div>
<!-- Rounded pill input -->
<input
type="search"
class="border border-gray-300 rounded-full px-6 py-2 w-full focus:outline-none focus:border-blue-500"
placeholder="Search..."
>
<!-- Input with error state -->
<input
type="text"
class="border-2 border-red-500 rounded-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-red-200"
placeholder="Error state"
>
<!-- Input with success state -->
<input
type="text"
class="border-2 border-green-500 rounded-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-green-200"
placeholder="Success state"
>Example 4: Avatar Variations
HTML
<!-- Round avatar -->
<img
src="avatar.jpg"
alt="User"
class="w-16 h-16 rounded-full object-cover"
>
<!-- Avatar with border -->
<img
src="avatar.jpg"
alt="User"
class="w-16 h-16 rounded-full border-4 border-white shadow-lg object-cover"
>
<!-- Avatar with colored border -->
<img
src="avatar.jpg"
alt="User"
class="w-16 h-16 rounded-full border-4 border-blue-500 object-cover"
>
<!-- Avatar with online indicator -->
<div class="relative inline-block">
<img
src="avatar.jpg"
alt="User"
class="w-16 h-16 rounded-full border-2 border-gray-300 object-cover"
>
<div class="absolute bottom-0 right-0 w-5 h-5 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<!-- Squared avatar with rounded corners -->
<img
src="avatar.jpg"
alt="User"
class="w-16 h-16 rounded-lg object-cover"
>Example 5: Alert/Notification Components
HTML
<!-- Info alert with left border -->
<div class="bg-blue-50 border-l-4 border-blue-500 rounded-r-lg p-4">
<div class="flex items-start">
<svg class="w-5 h-5 text-blue-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
</svg>
<div class="ml-3">
<h3 class="text-sm font-semibold text-blue-800">Information</h3>
<p class="text-sm text-blue-700 mt-1">Here's some helpful information.</p>
</div>
</div>
</div>
<!-- Success with full border -->
<div class="bg-green-50 border-2 border-green-200 rounded-lg p-4">
<div class="flex items-start">
<svg class="w-5 h-5 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<div class="ml-3">
<h3 class="text-sm font-semibold text-green-800">Success!</h3>
<p class="text-sm text-green-700 mt-1">Your changes have been saved.</p>
</div>
</div>
</div>
<!-- Warning with dashed border -->
<div class="bg-yellow-50 border-2 border-dashed border-yellow-400 rounded-lg p-4">
<div class="flex items-start">
<svg class="w-5 h-5 text-yellow-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
<div class="ml-3">
<h3 class="text-sm font-semibold text-yellow-800">Warning</h3>
<p class="text-sm text-yellow-700 mt-1">Please review before continuing.</p>
</div>
</div>
</div>Border Playground
Practice combining border utilities:
Build with Borders
Experiment with border width, color, style, and rounded corners
John Doe
Software Developer
This card demonstrates various border utilities including width, color, and rounded corners.
Border Best Practices
Follow These Guidelines:
- Use subtle borders:
border-gray-200orborder-gray-300for cards - Match rounded corners: Consistent rounding throughout UI
- Border for definition: When background contrast isn't enough
- Rounded-lg for cards: Modern, friendly feel
- Rounded-full for avatars: Standard circular appearance
- Left borders for accents: Quotes, alerts, featured items
- Combine with shadows: Depth and elevation
- Focus states: Always visible for accessibility
Key Takeaways
- Border widths:
border(1px) throughborder-8 - Individual sides:
border-t,border-r,border-b,border-l - Border colors work like background colors:
border-blue-500 - Border styles:
border-solid,border-dashed,border-dotted - Rounded corners:
rounded-smthroughrounded-full - Individual corners:
rounded-tl,rounded-tr, etc. - Outlines don't affect layout, borders do
- Divide utilities add borders between children automatically
- Always provide visible focus states for accessibility
What's Next?
You've mastered borders and rounded corners! You can now create polished UI components with perfectly styled borders.
In the next lesson, we'll explore Shadows & Ring Utilities—learning how to add depth with box shadows, drop shadows, and create beautiful focus states with rings.
🎯 Practice Challenge!
Create a set of cards with different border treatments: one with a subtle border and shadow, one with a thick colored left border, one with dashed borders (coupon style), and one with fully rounded corners. Make them all look cohesive!
Test Your Understanding
Question 1 of 3Score: 0/0