🧊 Bootstrap 5 – Border & Shadow Utilities: Add Outlines & Depth to Your UI
🧲 Introduction – Why Use Bootstrap 5 Border and Shadow Utilities?
Bootstrap 5 includes a wide set of border and shadow utility classes that allow you to quickly add borders, control their color and radius, and add shadows for depth—without writing custom CSS. Whether you’re designing cards, buttons, or layout boxes, these utilities help enhance structure, separation, and aesthetics.
🎯 In this guide, you’ll learn:
- How to use
.border,.rounded, and.shadowutilities - Control border width, color, sides, and radius
- Apply shadows of different depths to create visual hierarchy
- Build real-world card and box effects without extra CSS
✅ Example 1 – Basic Border Utility
<div class="border p-3 mb-3">
This div has a default border
</div>
| Class | Description |
|---|---|
border | Adds a 1px solid border |
p-3 | Padding inside the bordered box |
📌 Use .border to quickly outline containers or cards.
✅ Example 2 – Border Side Control
<div class="border-start border-3 border-primary p-3">
Only left border is visible and colored
</div>
| Class | Effect |
|---|---|
border-start | Adds border only to the left side |
border-3 | Sets the border width to .3rem |
border-primary | Uses Bootstrap’s primary theme color |
✅ Combine side-specific and color utilities for custom layouts.
✅ Example 3 – Border Radius (Rounded Corners)
<div class="border rounded-3 p-3">
Rounded corners with `.rounded-3`
</div>
| Class | Purpose |
|---|---|
rounded | Applies default radius |
rounded-0 | No rounding (square corners) |
rounded-3 | Medium rounded corners |
rounded-circle | Makes element perfectly circular (if square) |
📐 Useful for profile images, buttons, badges, and cards.
✅ Example 4 – Border Colors & Themes
<div class="border border-success p-3 mb-3">
Green success border
</div>
<div class="border border-danger border-2 p-3">
Red danger border with thicker edge
</div>
| Class | Effect |
|---|---|
border-success | Applies green border color |
border-danger | Applies red border color |
border-2 | Sets border width to .2rem |
🎨 All Bootstrap theme colors are available as border-{color}.
✅ Example 5 – Box Shadows
<div class="shadow p-3 mb-3 bg-body rounded">
Regular shadow
</div>
<div class="shadow-lg p-3 mb-3 bg-body rounded">
Large shadow
</div>
| Class | Description |
|---|---|
shadow-sm | Small subtle shadow |
shadow | Default medium-depth shadow |
shadow-lg | Large prominent shadow |
shadow-none | Removes any existing shadow |
📌 Shadows are ideal for elevating cards, modals, popups, and buttons.
📘 Border & Shadow Class Reference
| Type | Class Examples |
|---|---|
| Border | border, border-0, border-1 to border-5 |
| Sides | border-top, border-end, border-bottom, border-start |
| Color | border-primary, border-secondary, border-danger |
| Radius | rounded, rounded-0, rounded-circle, rounded-pill |
| Shadow | shadow-none, shadow-sm, shadow, shadow-lg |
✅ All border and shadow classes can be used responsively if combined with layout utilities.
🛠️ Best Practices for Borders & Shadows
| Practice | Reason/Benefit |
|---|---|
Use .border-0 on individual sides | To remove borders from specific edges only |
Pair .rounded with shadows | Creates smooth, elevated design for cards or boxes |
Combine border-* with bg-* | Enhances contrast and visibility |
Use .shadow sparingly | Prevents cluttered or overly “floating” designs |
Use rounded-circle for avatars | Ensures consistent UI for user profiles or badges |
📌 Summary – Recap & Next Steps
Bootstrap 5 border and shadow utilities help you create visually distinct, accessible components. Whether you’re styling buttons, cards, alerts, or layout wrappers, these classes let you define structure and emphasis instantly.
🔍 Key Takeaways:
- Use
.border,.border-*,.rounded-*for visual outlines - Customize border sides, colors, and widths with utility classes
- Apply
.shadow-*to elevate components like modals and cards - Combine with spacing, color, and layout utilities for polished UIs
- Ideal for buttons, badges, images, alerts, and tooltips
⚙️ Perfect for UI cards, profile boxes, callouts, section dividers, and layout visuals.
❓ FAQs – Bootstrap 5 Border and Shadow Utilities
❓ How do I remove a border from only one side?
✅ Use border-0 combined with a side class. Example: border border-end-0 removes the right border only.
❓ Can I make a circle avatar using border utilities?
✅ Use rounded-circle and ensure your image or div is square (equal height and width).
❓ What’s the difference between shadow and shadow-lg?
✅ shadow adds a medium-depth shadow. shadow-lg is deeper and more prominent, ideal for modals or elevated boxes.
❓ Can I apply border and shadow together?
✅ Yes, they work seamlessly together. Example: class="border border-dark shadow rounded".
Share Now :
