Bootstrap Borders & Shadows — Border Utilities and Box Shadows

In this tutorial, you will learn about Bootstrap Borders & Shadows. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap border utilities add, remove, and style borders on elements with color classes, while shadow utilities provide five depth levels for visual elevation.

What You'll Learn

You will learn how to add and remove borders on specific sides, style borders with colors and widths, create rounded corners with different radii, and apply shadow depth.

Why It Matters

Borders and shadows create visual separation and hierarchy. DodaTech's pricing cards use border colors to highlight the recommended plan and shadows to create a layered card effect.

Real-World Use

DodaZIP's download page uses border-primary on the recommended download button and shadow-lg on the feature cards to create visual depth.

flowchart LR
    A[Spacing] --> B[Borders & Shadows]
    B --> C[Add/Remove Borders]
    B --> D[Border Colors]
    B --> E[Border Radius]
    B --> F[Shadows]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Adding and Removing Borders

<div class="border p-3 mb-2">Default border on all sides</div>
<div class="border-top p-3 mb-2">Border top only</div>
<div class="border-end p-3 mb-2">Border end (right) only</div>
<div class="border-bottom p-3 mb-2">Border bottom only</div>
<div class="border-start p-3 mb-2">Border start (left) only</div>
<div class="border-0 p-3 mb-2">No borders at all</div>

Expected output: Six boxes demonstrating different border configurations.

Remove borders from specific sides:

<div class="border border-top-0 p-3 mb-2">All borders except top</div>
<div class="border border-end-0 p-3 mb-2">All borders except right</div>
<div class="border border-bottom-0 p-3 mb-2">All borders except bottom</div>
<div class="border border-start-0 p-3 mb-2">All borders except left</div>

Expected output: Four boxes with a border on three sides and one side missing.

Border Colors

<div class="border border-primary p-3 mb-2">Primary border</div>
<div class="border border-secondary p-3 mb-2">Secondary border</div>
<div class="border border-success p-3 mb-2">Success border</div>
<div class="border border-danger p-3 mb-2">Danger border</div>
<div class="border border-warning p-3 mb-2">Warning border</div>
<div class="border border-info p-3 mb-2">Info border</div>
<div class="border border-light p-3 mb-2">Light border</div>
<div class="border border-dark p-3 mb-2">Dark border</div>
<div class="border border-white p-3 mb-2 bg-dark">White border</div>

Expected output: Nine boxes with borders in each semantic color.

Border Width

<div class="border border-2 p-3 mb-2">2px border width</div>
<div class="border border-3 p-3 mb-2">3px border width</div>
<div class="border border-4 p-3 mb-2">4px border width</div>
<div class="border border-5 p-3 mb-2">5px border width</div>

Expected output: Four boxes with increasing border thickness from the default (1px) up to 5px.

Border Radius

<div class="border rounded p-3 mb-2">Rounded (default radius)</div>
<div class="border rounded-0 p-3 mb-2">No rounding</div>
<div class="border rounded-1 p-3 mb-2">Small rounding</div>
<div class="border rounded-2 p-3 mb-2">Medium rounding (default)</div>
<div class="border rounded-3 p-3 mb-2">Large rounding</div>
<div class="border rounded-4 p-3 mb-2">Extra large rounding</div>
<div class="border rounded-5 p-3 mb-2">Maximum rounding</div>
<div class="border rounded-circle p-3 mb-2" style="width: 100px; height: 100px;">
  Circle
</div>

Expected output: Eight elements showing different border radii, from sharp corners to a perfect circle.

Pill shape for wider elements:

<span class="border rounded-pill px-4 py-2 bg-primary text-white">
  Pill-shaped badge
</span>

Expected output: A pill-shaped element with fully rounded ends.

Shadows

<div class="shadow-none p-3 mb-3 bg-light">No shadow</div>
<div class="shadow-sm p-3 mb-3 bg-body rounded">Small shadow</div>
<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>

Expected output: Four boxes with increasing shadow depth, from no shadow to large shadow.

Shadow classes provide consistent elevation:

• .shadow-none — no shadow
• .shadow-sm — subtle, close shadow
• .shadow — medium depth
• .shadow-lg — prominent, deep shadow

Common Mistakes

1. Using Border Classes Without the Base border Class

Adding border-primary without border first will not show a border. The base class border adds the default 1px solid border.

2. Combining border-0 with border-top

border-0 removes all borders and takes precedence over side-specific classes. Apply side removal first, then border-0 last if needed.

3. Expecting Color Borders Without border-first

border-primary only sets the color. The element must also have the border class to display the border.

4. Using rounded-circle on Non-Square Elements

rounded-circle makes a perfect circle only on square elements. On rectangles, it creates an oval.

5. Overusing Large Shadows

shadow-lg creates significant depth that can look heavy on dense layouts. Use shadow-sm for cards and shadow for modals and dropdowns.

Practice Questions

1. How do you add a border to only the top of an element? Use border-top class.

2. How do you make a 3px primary-colored border? Combine border border-3 border-primary.

3. What is the difference between rounded and rounded-1? rounded uses the default radius (0.375rem). rounded-1 is smaller (0.25rem).

4. How do you create a circular element? Use rounded-circle on a square element with equal width and height.

5. What shadow class should you use for a card? shadow or shadow-sm for cards. shadow-lg for modals, dropdowns, or emphasized content.

Challenge

Create a testimonial card with a shadow, a colored left border (using border-start), rounded corners, and an avatar image with rounded-circle.

FAQ

Mini Project

Build a pricing tier card with three plans. The recommended plan should have a prominent border (border-primary border-3), shadow-lg, and rounded-3 corners. Other plans use regular border and shadow-sm.

What's Next

Master Display and Position utilities. Then learn Flex Utilities for flexible box layouts.