Tailwind CSS

Borders, Rounded Corners & Shadows

20 min Lesson 12 of 35

Borders, Rounded Corners & Shadows in Tailwind CSS

Borders, rounded corners, and shadows are essential visual elements that define the structure and depth of your user interface. Tailwind CSS provides comprehensive utilities for controlling these properties, allowing you to create polished, professional-looking designs with minimal effort.

Border Width

The border-{width} utilities control the thickness of borders on all sides or individual sides of an element:

Border Width Examples

<!-- Border on all sides -->
<div class="border">Default 1px border</div>
<div class="border-0">No border</div>
<div class="border-2">2px border</div>
<div class="border-4">4px border</div>
<div class="border-8">8px border</div>

<!-- Border on specific sides -->
<div class="border-t-4">Top border only</div>
<div class="border-r-4">Right border only</div>
<div class="border-b-4">Bottom border only</div>
<div class="border-l-4">Left border only</div>

<!-- Combining different sides -->
<div class="border-t-2 border-b-2">Top and bottom borders</div>
<div class="border-x-4">Left and right borders (horizontal)</div>
<div class="border-y-4">Top and bottom borders (vertical)</div>

<!-- Common use case: Card with accent border -->
<div class="border border-gray-200 border-l-4 border-l-blue-500 p-4 rounded">
    <h3 class="font-bold">Card Title</h3>
    <p>Card content with left accent border</p>
</div>

Note: The default border width is 1px. Available widths are: 0, 1 (default), 2, 4, and 8 pixels.

Border Colors

Border colors follow the same color palette as text and background colors. Use border-{color} utilities to style borders:

Border Color Examples

<!-- 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>

<!-- Different colors on different sides -->
<div class="border-4 border-gray-200 border-t-blue-500">
    Colored top border
</div>

<div class="border-2 border-gray-200 border-l-green-500 border-l-4">
    Accent left border
</div>

<!-- Using opacity with borders -->
<div class="border-2 border-blue-500/50">50% opacity border</div>
<div class="border-2 border-red-500/25">25% opacity border</div>

<!-- Interactive borders -->
<input
    type="text"
    class="border-2 border-gray-300 focus:border-blue-500 px-4 py-2 rounded transition-colors"
    placeholder="Focus to change border"
>

<!-- Status indicators with border colors -->
<div class="border-l-4 border-l-green-500 bg-green-50 p-4 rounded">
    <p class="text-green-800">Success message</p>
</div>

<div class="border-l-4 border-l-red-500 bg-red-50 p-4 rounded">
    <p class="text-red-800">Error message</p>
</div>

<div class="border-l-4 border-l-yellow-500 bg-yellow-50 p-4 rounded">
    <p class="text-yellow-800">Warning message</p>
</div>

Border Styles

Tailwind provides utilities for solid, dashed, and dotted border styles:

Border Style Examples

<!-- Different border styles -->
<div class="border-2 border-solid border-gray-400">Solid border (default)</div>
<div class="border-2 border-dashed border-gray-400">Dashed border</div>
<div class="border-2 border-dotted border-gray-400">Dotted border</div>
<div class="border-2 border-double border-gray-400">Double border</div>
<div class="border-2 border-none">No border</div>

<!-- Practical use cases -->
<!-- Dashed upload zone -->
<div class="border-2 border-dashed border-gray-300 hover:border-blue-500 rounded-lg p-8 text-center cursor-pointer transition-colors">
    <svg class="mx-auto h-12 w-12 text-gray-400">...</svg>
    <p class="mt-2 text-gray-600">Click to upload or drag and drop</p>
</div>

<!-- Dotted separator -->
<div class="border-t-2 border-dotted border-gray-300 my-6"></div>

<!-- Coupon code box -->
<div class="border-2 border-dashed border-green-500 bg-green-50 p-4 rounded-lg">
    <p class="text-green-800 font-semibold">Promo Code: SAVE20</p>
</div>

Rounded Corners

The rounded-{size} utilities control border radius, creating rounded corners:

Rounded Corners Examples

<!-- Basic rounding -->
<div class="rounded-none">No rounding (square)</div>
<div class="rounded-sm">Small rounded (2px)</div>
<div class="rounded">Default rounded (4px)</div>
<div class="rounded-md">Medium rounded (6px)</div>
<div class="rounded-lg">Large rounded (8px)</div>
<div class="rounded-xl">Extra large (12px)</div>
<div class="rounded-2xl">2XL rounded (16px)</div>
<div class="rounded-3xl">3XL rounded (24px)</div>
<div class="rounded-full">Fully rounded (circular)</div>

<!-- Rounding specific corners -->
<div class="rounded-t-lg">Rounded top corners</div>
<div class="rounded-r-lg">Rounded right corners</div>
<div class="rounded-b-lg">Rounded bottom corners</div>
<div class="rounded-l-lg">Rounded left corners</div>

<!-- Individual corners -->
<div class="rounded-tl-lg">Rounded top-left</div>
<div class="rounded-tr-lg">Rounded top-right</div>
<div class="rounded-br-lg">Rounded bottom-right</div>
<div class="rounded-bl-lg">Rounded bottom-left</div>

<!-- Common use cases -->
<!-- Button -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600">
    Rounded Button
</button>

<!-- Pill button -->
<button class="bg-green-500 text-white px-8 py-2 rounded-full hover:bg-green-600">
    Pill Button
</button>

<!-- Avatar -->
<img src="avatar.jpg" class="w-12 h-12 rounded-full" alt="User">

<!-- Card with rounded corners -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
    <h3 class="font-bold text-lg">Card Title</h3>
    <p class="text-gray-600 mt-2">Card content</p>
</div>

<!-- Badge -->
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">
    New
</span>

<!-- Tab with rounded top -->
<button class="bg-white px-6 py-3 rounded-t-lg border border-b-0 border-gray-200">
    Active Tab
</button>

Design Tip: Use rounded-lg for modern, soft interfaces. Use rounded-full for avatars and pill buttons. Use rounded or rounded-md for subtle, professional designs.

Divide Utilities

The divide utilities add borders between child elements, perfect for lists and grids:

Divide Utilities Examples

<!-- Horizontal dividers -->
<div class="divide-y divide-gray-200">
    <div class="py-3">Item 1</div>
    <div class="py-3">Item 2</div>
    <div class="py-3">Item 3</div>
</div>

<!-- Vertical dividers -->
<div class="flex divide-x divide-gray-300">
    <div class="px-4">Section 1</div>
    <div class="px-4">Section 2</div>
    <div class="px-4">Section 3</div>
</div>

<!-- Custom divide width and color -->
<div class="divide-y-2 divide-blue-500">
    <div class="py-4">Item 1</div>
    <div class="py-4">Item 2</div>
</div>

<!-- Divide with style -->
<div class="divide-y divide-dashed divide-gray-300">
    <div class="py-3">Dashed divider</div>
    <div class="py-3">Between items</div>
</div>

<!-- Navigation menu with dividers -->
<nav class="bg-white border border-gray-200 rounded-lg divide-y divide-gray-200">
    <a href="#" class="block px-4 py-3 hover:bg-gray-50">Dashboard</a>
    <a href="#" class="block px-4 py-3 hover:bg-gray-50">Profile</a>
    <a href="#" class="block px-4 py-3 hover:bg-gray-50">Settings</a>
    <a href="#" class="block px-4 py-3 hover:bg-gray-50">Logout</a>
</nav>

<!-- Stats grid with vertical dividers -->
<div class="flex divide-x divide-gray-200 bg-white border border-gray-200 rounded-lg">
    <div class="flex-1 p-6 text-center">
        <div class="text-3xl font-bold text-gray-900">2,543</div>
        <div class="text-sm text-gray-600 mt-1">Users</div>
    </div>
    <div class="flex-1 p-6 text-center">
        <div class="text-3xl font-bold text-gray-900">1,234</div>
        <div class="text-sm text-gray-600 mt-1">Sales</div>
    </div>
    <div class="flex-1 p-6 text-center">
        <div class="text-3xl font-bold text-gray-900">98%</div>
        <div class="text-sm text-gray-600 mt-1">Satisfaction</div>
    </div>
</div>

Note: Divide utilities add borders between children using CSS, so they don't add extra markup. The first child won't have a border.

Ring Utilities

Ring utilities create outline-style borders that don't affect layout, perfect for focus states:

Ring Utilities Examples

<!-- Basic rings -->
<button class="bg-white px-4 py-2 rounded ring-2 ring-blue-500">
    Ring border
</button>

<button class="bg-white px-4 py-2 rounded ring-4 ring-green-500">
    Thicker ring
</button>

<!-- Ring with opacity -->
<button class="bg-blue-500 text-white px-4 py-2 rounded ring-4 ring-blue-300">
    Ring with color
</button>

<!-- Focus rings for accessibility -->
<input
    type="text"
    class="border border-gray-300 px-4 py-2 rounded focus:outline-none focus:ring-4 focus:ring-blue-300 focus:border-blue-500"
    placeholder="Focus to see ring"
>

<button class="bg-green-500 text-white px-6 py-3 rounded-lg focus:outline-none focus:ring-4 focus:ring-green-300">
    Button with focus ring
</button>

<!-- Ring offset -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg ring-4 ring-blue-300 ring-offset-2 ring-offset-white">
    Ring with offset
</button>

<!-- Dark background ring offset -->
<div class="bg-gray-900 p-8">
    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-offset-2 focus:ring-offset-gray-900">
        Ring on dark background
    </button>
</div>

<!-- Ring inset -->
<button class="bg-white border-2 border-gray-300 px-4 py-2 rounded ring-2 ring-inset ring-blue-500">
    Inset ring
</button>

Accessibility Tip: Always provide visible focus indicators. Ring utilities are perfect because they don't affect layout and are highly visible.

Outline Utilities

Outline utilities create borders outside the element, similar to rings but with different styling options:

Outline Examples

<!-- Basic outlines -->
<button class="bg-white px-4 py-2 rounded outline outline-2 outline-blue-500">
    Outline button
</button>

<button class="bg-white px-4 py-2 rounded outline-dashed outline-2 outline-gray-400">
    Dashed outline
</button>

<button class="bg-white px-4 py-2 rounded outline-dotted outline-2 outline-gray-400">
    Dotted outline
</button>

<!-- Outline offset -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg outline outline-2 outline-blue-300 outline-offset-2">
    Outline with offset
</button>

<!-- Focus outline -->
<button class="bg-green-500 text-white px-4 py-2 rounded focus:outline focus:outline-2 focus:outline-green-300 focus:outline-offset-2">
    Focus outline
</button>

<!-- Remove default outline -->
<button class="bg-blue-500 text-white px-4 py-2 rounded outline-none focus:ring-4 focus:ring-blue-300">
    No outline, use ring instead
</button>

Box Shadows

Shadows add depth and elevation to your interface. Tailwind provides shadow utilities from subtle to dramatic:

Box Shadow Examples

<!-- Shadow sizes -->
<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">2XL shadow</div>
<div class="shadow-none">No shadow</div>

<!-- Inner shadow -->
<div class="shadow-inner">Inner shadow (inset)</div>

<!-- Colored shadows -->
<div class="shadow-lg shadow-blue-500/50">Blue shadow</div>
<div class="shadow-lg shadow-red-500/50">Red shadow</div>
<div class="shadow-lg shadow-green-500/50">Green shadow</div>

<!-- Interactive shadows -->
<button class="bg-white border border-gray-200 px-6 py-3 rounded-lg shadow hover:shadow-lg transition-shadow">
    Hover for more shadow
</button>

<div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all p-6 cursor-pointer">
    <h3 class="font-bold text-lg">Hover Card</h3>
    <p class="text-gray-600 mt-2">Shadow increases on hover</p>
</div>

<!-- Elevation levels for material design -->
<div class="bg-white rounded-lg shadow-sm p-4">Level 1 - Subtle</div>
<div class="bg-white rounded-lg shadow p-4">Level 2 - Card</div>
<div class="bg-white rounded-lg shadow-md p-4">Level 3 - Raised</div>
<div class="bg-white rounded-lg shadow-lg p-4">Level 4 - Modal</div>
<div class="bg-white rounded-lg shadow-xl p-4">Level 5 - Popup</div>
<div class="bg-white rounded-lg shadow-2xl p-4">Level 6 - Maximum</div>

<!-- Button with shadow states -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg shadow-md hover:shadow-lg active:shadow-sm transition-shadow">
    Interactive Shadow Button
</button>

Design Principle: Use shadows to establish visual hierarchy. Cards typically use shadow or shadow-md, modals use shadow-xl or shadow-2xl, and dropdowns use shadow-lg.

Drop Shadow

Drop shadows are filter-based shadows that follow the shape of transparent images and text:

Drop Shadow Examples

<!-- Drop shadow on images -->
<img src="icon.png" class="drop-shadow-sm" alt="Icon">
<img src="icon.png" class="drop-shadow" alt="Icon">
<img src="icon.png" class="drop-shadow-md" alt="Icon">
<img src="icon.png" class="drop-shadow-lg" alt="Icon">
<img src="icon.png" class="drop-shadow-xl" alt="Icon">
<img src="icon.png" class="drop-shadow-2xl" alt="Icon">
<img src="icon.png" class="drop-shadow-none" alt="Icon">

<!-- Drop shadow on text -->
<h1 class="text-4xl font-bold text-white drop-shadow-lg">
    Text with drop shadow
</h1>

<!-- Drop shadow on icons/SVG -->
<svg class="w-12 h-12 text-blue-500 drop-shadow-md">
    <!-- SVG content -->
</svg>

<!-- Comparison: box-shadow vs drop-shadow -->
<div class="flex gap-8">
    <div>
        <img src="star.png" class="shadow-lg" alt="Box shadow">
        <p class="text-sm mt-2">Box shadow (rectangle)</p>
    </div>
    <div>
        <img src="star.png" class="drop-shadow-lg" alt="Drop shadow">
        <p class="text-sm mt-2">Drop shadow (follows shape)</p>
    </div>
</div>

When to use drop-shadow: Use drop-shadow for transparent PNG images, icons, and text. Use box-shadow for cards, buttons, and rectangular elements.

Combining Borders, Corners, and Shadows

Create sophisticated designs by combining these utilities:

Combined Examples

<!-- Modern card design -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg transition-all p-6">
    <div class="flex items-center gap-4">
        <img src="avatar.jpg" class="w-16 h-16 rounded-full border-2 border-gray-200" alt="User">
        <div>
            <h3 class="font-bold text-lg">John Doe</h3>
            <p class="text-gray-600">Product Designer</p>
        </div>
    </div>
</div>

<!-- Pricing card -->
<div class="relative bg-white border-2 border-blue-500 rounded-2xl shadow-xl p-8">
    <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
        <span class="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-semibold shadow-lg">
            Popular
        </span>
    </div>
    <h3 class="text-2xl font-bold mt-2">Pro Plan</h3>
    <p class="text-4xl font-bold mt-4">$29<span class="text-lg text-gray-600">/month</span></p>
    <button class="w-full bg-blue-500 text-white py-3 rounded-lg mt-6 hover:bg-blue-600 shadow-md hover:shadow-lg transition-all">
        Get Started
    </button>
</div>

<!-- Alert component -->
<div class="border-l-4 border-l-yellow-500 bg-yellow-50 rounded-r-lg shadow-sm p-4">
    <div class="flex items-start gap-3">
        <svg class="w-6 h-6 text-yellow-600 flex-shrink-0">!</svg>
        <div>
            <h4 class="font-semibold text-yellow-900">Warning</h4>
            <p class="text-yellow-800 mt-1">Please review your information before submitting.</p>
        </div>
    </div>
</div>

<!-- Segmented control -->
<div class="inline-flex bg-gray-100 rounded-lg p-1 shadow-inner">
    <button class="bg-white shadow px-4 py-2 rounded-md font-medium text-sm">
        Active
    </button>
    <button class="px-4 py-2 rounded-md font-medium text-sm text-gray-600 hover:text-gray-900">
        Inactive
    </button>
    <button class="px-4 py-2 rounded-md font-medium text-sm text-gray-600 hover:text-gray-900">
        Disabled
    </button>
</div>

<!-- Feature card with image -->
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow">
    <img src="feature.jpg" class="w-full h-48 object-cover" alt="Feature">
    <div class="p-6 border-t-4 border-t-blue-500">
        <h3 class="text-xl font-bold">Feature Title</h3>
        <p class="text-gray-600 mt-2">Feature description goes here.</p>
        <button class="mt-4 text-blue-600 font-semibold hover:text-blue-700">
            Learn more →
        </button>
    </div>
</div>

<!-- Input group -->
<div class="flex">
    <span class="inline-flex items-center px-4 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg text-gray-600">
        @
    </span>
    <input
        type="text"
        class="flex-1 border border-gray-300 px-4 py-2 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-500"
        placeholder="username"
    >
</div>

Exercise 1: Design a Profile Card

Create a profile card that includes:

Rounded corners with rounded-xl
Subtle border with border border-gray-200
Box shadow that increases on hover
Circular avatar image with border
Status indicator with colored border and background
Action buttons with different shadow states

Exercise 2: Build a Notification Component

Create notification components for success, error, warning, and info messages that feature:

Left accent border with border-l-4 in appropriate colors
Colored background with low opacity
Rounded corners on the right side
Subtle shadow
Close button with ring focus state

Exercise 3: Create a Dashboard Stats Grid

Build a statistics grid with cards that have:

Vertical dividers between stat items using divide-x
Different shadow levels for different card importance
Rounded corners and borders
Hover effects with shadow transitions
Icon with drop-shadow
Top border accent in different colors per category

Summary

In this lesson, you've mastered borders, rounded corners, and shadows in Tailwind CSS:

Border width: Control thickness on all sides or individual sides
Border colors: Full color palette with opacity support
Border styles: Solid, dashed, dotted, and double borders
Rounded corners: From subtle to fully circular with individual corner control
Divide utilities: Add borders between child elements
Ring utilities: Outline-style borders perfect for focus states
Outline utilities: Alternative to rings with more styling options
Box shadows: Create depth with various shadow levels
Drop shadows: Filter-based shadows for transparent images

These utilities are fundamental for creating polished, professional interfaces. Combine them thoughtfully to establish visual hierarchy, improve usability, and create beautiful designs.