Bootstrap 5 Framework
Borders and Shadows
Working with Borders and Shadows in Bootstrap
Bootstrap provides comprehensive utilities for adding borders, controlling border properties, creating rounded corners, and applying shadows to elements. These utilities help create depth and visual separation in your designs.
Border Utilities
Add borders to any element or control which sides have borders:
<!-- Add borders to all sides -->
<div class="border">Border on all sides</div>
<!-- Add borders to specific sides -->
<div class="border-top">Border top only</div>
<div class="border-end">Border right only</div>
<div class="border-bottom">Border bottom only</div>
<div class="border-start">Border left only</div>
<!-- Remove borders -->
<div class="border border-0">No border</div>
<div class="border border-top-0">No top border</div>
<div class="border border-end-0">No right border</div>
<div class="border border-bottom-0">No bottom border</div>
<div class="border border-start-0">No left border</div>
Note: Bootstrap uses
border-start and border-end instead of left/right to support both LTR and RTL languages automatically.
Border Colors
Apply theme colors to borders using border color utilities:
<!-- Theme color borders -->
<div class="border border-primary">Primary border</div>
<div class="border border-secondary">Secondary border</div>
<div class="border border-success">Success border</div>
<div class="border border-danger">Danger border</div>
<div class="border border-warning">Warning border</div>
<div class="border border-info">Info border</div>
<div class="border border-light">Light border</div>
<div class="border border-dark">Dark border</div>
<div class="border border-white">White border</div>
Border Width
Control the thickness of borders with width utilities:
<!-- Border widths from 1 to 5 -->
<div class="border border-1">Border width 1px</div>
<div class="border border-2">Border width 2px</div>
<div class="border border-3">Border width 3px</div>
<div class="border border-4">Border width 4px</div>
<div class="border border-5">Border width 5px</div>
<!-- Combine with colors -->
<div class="border border-primary border-3">
Thick primary border
</div>
Border Opacity
Control border transparency with opacity utilities:
<!-- Border opacity from 10 to 100 -->
<div class="border border-primary border-opacity-100">100% opacity</div>
<div class="border border-primary border-opacity-75">75% opacity</div>
<div class="border border-primary border-opacity-50">50% opacity</div>
<div class="border border-primary border-opacity-25">25% opacity</div>
<div class="border border-primary border-opacity-10">10% opacity</div>
Tip: Combine border width, color, and opacity for subtle, professional-looking borders that don't overpower your content.
Rounded Corners
Add border radius to create rounded corners:
<!-- All corners rounded -->
<div class="rounded">Rounded corners</div>
<div class="rounded-0">No rounded corners</div>
<div class="rounded-1">Small rounded (0.25rem)</div>
<div class="rounded-2">Medium rounded (0.375rem)</div>
<div class="rounded-3">Large rounded (0.5rem)</div>
<div class="rounded-4">Extra large rounded (1rem)</div>
<div class="rounded-5">Extra extra large rounded (2rem)</div>
<!-- Specific corners -->
<div class="rounded-top">Rounded top corners</div>
<div class="rounded-end">Rounded right corners</div>
<div class="rounded-bottom">Rounded bottom corners</div>
<div class="rounded-start">Rounded left corners</div>
<!-- Special shapes -->
<div class="rounded-circle" style="width: 100px; height: 100px;">
Circle
</div>
<div class="rounded-pill">Pill shape</div>
Shadow Utilities
Add depth to elements with box shadow utilities:
<!-- Different shadow sizes -->
<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>
<!-- Shadow with background -->
<div class="bg-white shadow-lg rounded p-4">
Card with large shadow
</div>
Note: Shadows work best on elements with a background color. White or light backgrounds show shadows more prominently.
Combining Borders and Shadows
Create professional-looking components by combining borders, rounded corners, and shadows:
<!-- Card with border and shadow -->
<div class="border border-2 border-primary rounded shadow-sm p-4">
<h5>Featured Card</h5>
<p>This card has a colored border, rounded corners, and a subtle shadow.</p>
</div>
<!-- Alert-style box -->
<div class="border-start border-5 border-warning bg-warning bg-opacity-10 rounded-end shadow-sm p-3">
<strong>Warning:</strong> Please review your changes before submitting.
</div>
<!-- Elevated card -->
<div class="bg-white rounded-3 shadow-lg p-4">
<h4>Elevated Content</h4>
<p>Large shadows create a floating effect.</p>
</div>
<!-- Subtle bordered card -->
<div class="border border-light rounded-2 p-4">
<h5>Minimal Card</h5>
<p>Clean and simple with a light border.</p>
</div>
Practical Example: Profile Cards
Create polished profile cards using border and shadow utilities:
<div class="container py-5">
<div class="row g-4">
<!-- Basic profile card -->
<div class="col-md-6 col-lg-4">
<div class="bg-white rounded-3 shadow-sm overflow-hidden">
<div class="bg-primary" style="height: 120px;"></div>
<div class="text-center" style="margin-top: -60px;">
<img src="avatar.jpg"
class="rounded-circle border border-5 border-white shadow"
width="120"
height="120"
alt="Profile">
</div>
<div class="p-4 text-center">
<h5 class="mb-1">John Doe</h5>
<p class="text-muted mb-3">Web Developer</p>
<button class="btn btn-primary rounded-pill">Follow</button>
</div>
</div>
</div>
<!-- Premium profile card -->
<div class="col-md-6 col-lg-4">
<div class="border border-warning border-3 rounded-4 shadow-lg p-4 position-relative">
<span class="position-absolute top-0 start-50 translate-middle badge rounded-pill bg-warning text-dark">
Premium
</span>
<div class="text-center mt-3">
<img src="avatar2.jpg"
class="rounded-circle shadow-sm"
width="100"
height="100"
alt="Profile">
<h5 class="mt-3 mb-1">Jane Smith</h5>
<p class="text-muted mb-3">UI/UX Designer</p>
<button class="btn btn-outline-warning rounded-pill">Connect</button>
</div>
</div>
</div>
<!-- Minimal profile card -->
<div class="col-md-6 col-lg-4">
<div class="border-0 rounded-2 p-4">
<div class="d-flex align-items-center gap-3">
<img src="avatar3.jpg"
class="rounded-circle border border-2 border-primary"
width="80"
height="80"
alt="Profile">
<div class="flex-grow-1">
<h6 class="mb-1">Mike Johnson</h6>
<p class="text-muted small mb-2">Product Manager</p>
<button class="btn btn-sm btn-primary rounded-pill">
Message
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Hover Effects with Borders and Shadows
Add interactivity by changing borders and shadows on hover:
<style>
.hover-card {
transition: all 0.3s ease;
}
.hover-card:hover {
transform: translateY(-5px);
box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}
.hover-border:hover {
border-color: var(--bs-primary) !important;
}
</style>
<!-- Card with hover effect -->
<div class="card border-0 shadow-sm hover-card">
<img src="image.jpg" class="card-img-top rounded-top" alt="...">
<div class="card-body">
<h5 class="card-title">Interactive Card</h5>
<p class="card-text">Hover to see the shadow and lift effect.</p>
</div>
</div>
<!-- Button-like card -->
<div class="border border-2 border-light rounded-3 p-4 hover-border" style="cursor: pointer;">
<h6>Clickable Option</h6>
<p class="small text-muted mb-0">Border changes color on hover</p>
</div>
Tip: Use CSS transitions with Bootstrap utilities to create smooth hover effects that enhance user experience without requiring complex CSS.
Dividers Using Borders
Create visual dividers and separators with border utilities:
<!-- Horizontal divider -->
<div class="border-bottom border-2 border-primary mb-4"></div>
<!-- Text with divider -->
<div class="d-flex align-items-center my-4">
<div class="flex-grow-1 border-bottom"></div>
<span class="px-3 text-muted">OR</span>
<div class="flex-grow-1 border-bottom"></div>
</div>
<!-- Vertical divider -->
<div class="d-flex">
<div class="p-3">Left content</div>
<div class="border-start border-2"></div>
<div class="p-3">Right content</div>
</div>
<!-- Decorative border accent -->
<div class="border-start border-5 border-primary ps-3">
<h4>Important Section</h4>
<p>The left border draws attention to this content.</p>
</div>
Image Borders and Shapes
Style images with borders and rounded corners:
<!-- Circular image -->
<img src="avatar.jpg" class="rounded-circle border border-3 border-primary" width="150" height="150" alt="Avatar">
<!-- Rounded image with shadow -->
<img src="photo.jpg" class="rounded-3 shadow-lg" width="300" alt="Photo">
<!-- Thumbnail style -->
<img src="thumb.jpg" class="border border-2 border-light rounded" width="200" alt="Thumbnail">
<!-- Pill-shaped badge image -->
<img src="badge.jpg" class="rounded-pill shadow-sm" width="250" height="80" alt="Badge">
Warning: When using
rounded-circle, ensure your image is square (equal width and height) for a perfect circle. Non-square images will appear as ovals.
Responsive Borders and Shadows
Apply borders and shadows conditionally at different breakpoints:
<!-- Border only on large screens -->
<div class="border-0 border-lg shadow-none shadow-lg-lg rounded-0 rounded-lg-3 p-3">
No border on mobile, bordered on large screens
</div>
<!-- Note: You may need custom CSS for fully responsive borders -->
<style>
@media (min-width: 992px) {
.border-lg {
border: 1px solid var(--bs-border-color) !important;
}
.shadow-lg-lg {
box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}
.rounded-lg-3 {
border-radius: 0.5rem !important;
}
}
</style>
Practical Example: Pricing Cards with Advanced Styling
Create sophisticated pricing cards using all border and shadow techniques:
<div class="row g-4">
<!-- Basic plan -->
<div class="col-lg-4">
<div class="border border-light rounded-3 shadow-sm p-4 h-100">
<h5 class="text-center mb-4">Basic</h5>
<div class="text-center mb-4">
<span class="h2">$9</span>
<span class="text-muted">/month</span>
</div>
<ul class="list-unstyled">
<li class="mb-2">✓ Feature one</li>
<li class="mb-2">✓ Feature two</li>
<li class="mb-2 text-muted">✗ Feature three</li>
</ul>
<button class="btn btn-outline-primary w-100 rounded-pill">
Choose Plan
</button>
</div>
</div>
<!-- Popular plan with emphasis -->
<div class="col-lg-4">
<div class="border border-primary border-3 rounded-4 shadow-lg p-4 h-100 position-relative">
<span class="position-absolute top-0 start-50 translate-middle badge rounded-pill bg-primary">
Popular
</span>
<h5 class="text-center mb-4 mt-2">Pro</h5>
<div class="text-center mb-4">
<span class="h2 text-primary">$29</span>
<span class="text-muted">/month</span>
</div>
<ul class="list-unstyled">
<li class="mb-2">✓ Feature one</li>
<li class="mb-2">✓ Feature two</li>
<li class="mb-2">✓ Feature three</li>
</ul>
<button class="btn btn-primary w-100 rounded-pill shadow-sm">
Choose Plan
</button>
</div>
</div>
<!-- Enterprise plan -->
<div class="col-lg-4">
<div class="bg-dark text-white rounded-3 shadow p-4 h-100">
<h5 class="text-center mb-4">Enterprise</h5>
<div class="text-center mb-4">
<span class="h2">$99</span>
<span class="text-white-50">/month</span>
</div>
<ul class="list-unstyled">
<li class="mb-2">✓ All Pro features</li>
<li class="mb-2">✓ Priority support</li>
<li class="mb-2">✓ Custom solutions</li>
</ul>
<button class="btn btn-light w-100 rounded-pill">
Contact Sales
</button>
</div>
</div>
</div>
Exercise: Build a Dashboard Card Grid
Create a dashboard with various styled cards demonstrating borders and shadows:
- Create a 3-column grid of stat cards with subtle shadows
- Add a featured card with a colored left border accent (border-start border-5)
- Create a card with circular profile images using rounded-circle
- Design an alert card with warning border and shadow
- Build a hoverable card that increases shadow on hover
- Add dividers between card sections using border utilities
Bonus: Create a "glass morphism" effect using borders, shadows, and background opacity for a modern, translucent card design.
Summary
- Border utilities control which sides have borders:
border,border-top, etc. - Border colors use theme colors:
border-primary,border-danger, etc. - Border width classes range from
border-1toborder-5 - Border opacity controls transparency with
border-opacity-*classes - Rounded corners use
roundedclasses with sizes from 0 to 5 - Special shapes include
rounded-circleandrounded-pill - Shadow utilities provide depth:
shadow-sm,shadow,shadow-lg - Combine borders, rounds, and shadows for professional designs
- Use borders creatively for dividers, accents, and visual hierarchy
- Add hover effects with CSS transitions for interactivity