❮ Previous Next ❯

Border & Shadow Utilities

  • Apply borders, rounded corners, and shadows using Bootstrap utilities.

  • Introduction to Border & Shadow Utilities

    Borders, shadows, and rounded corners play a major role in:

    • Visual separation

    • Depth and hierarchy

    • Modern UI aesthetics

    • Component clarity

    In Bootstrap 5, border and shadow utilities allow developers to enhance UI elements without writing custom CSS.

    These utilities are commonly used for:

    • Cards

    • Buttons

    • Images

    • Containers

    • Alerts and panels

    Border Utilities

    What Are Border Utilities ?

    Border utilities control:

    • Whether a border exists

    • Which side has a border

    • Border color

    CSS equivalent:

    border: 1px solid #dee2e6;

    Bootstrap equivalent:

    <div class="border"></div>

    Basic Border Classes

    ClassEffect
    borderAdds border on all sides
    border-0Removes all borders

Bootstrap Border

Use the border class to quickly add a border around an element. 

<div class="border p-3">
  Box with border
</div>

  • Directional Border Utilities

    Borders can be applied to specific sides.

    ClassEffect
    border-topTop border
    border-bottomBottom border
    border-startLeft border (LTR)
    border-endRight border (LTR)

Border Side Utilities

Use Bootstrap border utilities to add or remove borders from specific sides of an element. 

<!-- Bottom Border Only -->
<div class="border-bottom p-2">
  Bottom border only
</div>

<!-- Removing Top Border -->
<div class="border border-top-0 p-3">
  Border except top
</div>

  • Used when:

    • Combining multiple elements

    • Creating table-like layouts

    Border Color Utilities

    Border Color Syntax

    border-{color}

    Common Border Color Classes

    ClassUse Case
    border-primaryHighlight
    border-successSuccess state
    border-dangerError state
    border-warningWarning
    border-infoInformational
    border-lightSubtle borders
    border-darkStrong emphasis

Border Color

Use Bootstrap border color utilities to apply different colors to element borders. 

<div class="border border-success p-3">
  Success bordered box
</div>

  • Shadow Utilities

    What Are Shadow Utilities ?

    Shadows create depth and elevation, helping users understand:

    • Which elements are interactive

    • Which elements are layered above others

    Bootstrap provides predefined shadow levels.

    Shadow Utility Classes

    ClassEffect
    shadow-noneNo shadow
    shadow-smSmall shadow
    shadowDefault shadow
    shadow-lgLarge shadow

Shadow Utilities

Use Bootstrap shadow utilities to add small, default, or large shadow effects to elements. 

<div class="p-3 shadow-sm">Small shadow</div>
<div class="p-3 shadow">Default shadow</div>
<div class="p-3 shadow-lg">Large shadow</div>

  • Used commonly for:

    • Cards

    • Dropdowns

    • Modals

    • Floating elements

    When to Use Shadows

    Use shadows to:

    • Indicate elevation

    • Highlight focus

    • Separate content layers

    Avoid:

    • Too many shadows

    • Overly strong shadows

    • Using shadows without purpose

    Rounded Utilities

    What Are Rounded Utilities ?

    Rounded utilities control border-radius, which defines how rounded the corners of an element are.

    CSS equivalent:

    border-radius: 0.375rem;

    Bootstrap equivalent:

    <div class="rounded"></div>

    Rounded Utility Classes

    ClassEffect
    roundedDefault rounding
    rounded-0No rounding
    rounded-1Small
    rounded-2Medium
    rounded-3Large
    rounded-circlePerfect circle
    rounded-pillPill shape

Rounded Utilities

Use Bootstrap rounded utilities to create rounded boxes, circular images, and pill-shaped buttons. 

<!-- Basic Rounded Box -->
<div class="border rounded p-3">
  Rounded corners
</div>

<!-- Circular Image -->
<img src="profile.jpg" class="rounded-circle" width="100">

<!-- Pill Button -->
<button class="btn btn-primary rounded-pill">
  Pill Button
</button>

  • Directional Rounded Utilities

    Rounded corners can be applied to specific sides.

    ClassEffect
    rounded-topTop corners
    rounded-bottomBottom corners
    rounded-startLeft side
    rounded-endRight side

Rounded Sides & Combined

Use Bootstrap utilities to apply rounded corners to specific sides and combine border, shadow, and rounded styles. 

<!-- Rounded Top Only -->
<div class="border rounded-top p-3">
  Rounded top only
</div>

<!-- Combining Border, Shadow & Rounded -->
<div class="border border-primary rounded shadow p-4">
  Card-style container
</div>

  • This creates:

    • Clear border

    • Soft rounded corners

    • Subtle elevation

    No custom CSS required.

    Common Mistakes

    • Overusing borders everywhere

    • Using heavy shadows excessively

    • Mixing rounded styles inconsistently

    • Ignoring design consistency

    • Applying borders when spacing is enough

      Best Practices for Border & Shadow Utilities

      • Use borders for separation, not decoration

      • Use shadows to indicate elevation

      • Keep rounded styles consistent

      • Prefer subtle effects

      • Combine utilities intentionally

    ❮ Previous Next ❯