Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction

→

Border Utilities in Bootstrap 5

Border Utilities: Add or remove borders, control border width, color, and radius with responsive variations.

Basic Borders

Border Add/Remove

Add Border

.border

No Border

.border-0

Border Top

.border-top

Border End (Right)

.border-end

Border Bottom

.border-bottom

Border Start (Left)

.border-start

Remove Top Border

.border-top-0

Remove All Borders

.border.border-0

<!-- Add borders -->
<div class="border">All sides border</div>
<div class="border-top">Top border only</div>
<div class="border-end">Right border (RTL: left)</div>
<div class="border-bottom">Bottom border only</div>
<div class="border-start">Left border (RTL: right)</div>

<!-- Remove borders -->
<div class="border-0">No border</div>
<div class="border border-top-0">Border without top</div>
<div class="border border-end-0">Border without right</div>
<div class="border border-bottom-0">Border without bottom</div>
<div class="border border-start-0">Border without left</div>

<!-- Combined examples -->
<div class="border-top border-bottom">Top and bottom borders</div>
<div class="border-start border-end">Left and right borders</div>

<!-- On specific elements -->
<img src="image.jpg" class="img-thumbnail border" alt="Image with border">
<button class="btn btn-primary border">Button with border</div>
<div class="card border">Card with border</div>

<!-- Remove Bootstrap default borders -->
<div class="card border-0">Card without border</div>
<div class="list-group-item border-0">List item without border</div>

Border Colors

Theme Border Colors

Primary

.border-primary

Success

.border-success

Warning

.border-warning

Danger

.border-danger

Info

.border-info

Dark

.border-dark

White

.border-white

Transparent

.border-transparent

<!-- Border colors -->
<div class="border border-primary">Primary color border</div>
<div class="border border-secondary">Secondary color border</div>
<div class="border border-success">Success color border</div>
<div class="border border-danger">Danger color border</div>
<div class="border border-warning">Warning color border</div>
<div class="border border-info">Info color border</div>
<div class="border border-light">Light color border</div>
<div class="border border-dark">Dark color border</div>
<div class="border border-white">White color border</div>
<div class="border border-transparent">Transparent border</div>

<!-- Side-specific border colors -->
<div class="border-top border-primary">Top border with primary color</div>
<div class="border-end border-success">Right border with success color</div>
<div class="border-bottom border-danger">Bottom border with danger color</div>
<div class="border-start border-warning">Left border with warning color</div>

<!-- Combined examples -->
<div class="border border-primary border-3">Thick primary border</div>
<div class="border-top border-bottom border-success">Top and bottom success borders</div>

<!-- On form elements -->
<input type="text" class="form-control border-primary" placeholder="Primary border input">
<select class="form-select border-success">
  <option>Success border select</option>
</select>
<textarea class="form-control border-warning" placeholder="Warning border textarea"></textarea>

<!-- Cards with colored borders -->
<div class="card border-primary">
  <div class="card-body">Primary bordered card</div>
</div>

<div class="card border-success">
  <div class="card-body">Success bordered card</div>
</div>

<!-- Alerts with colored borders -->
<div class="alert border border-info">
  Alert with info border
</div>

Border Width

Border Thickness

Default (1px)

.border

Thicker (3px)

.border-3

Thickest (5px)

.border-5

Top Width

.border-top-3

Right Width

.border-end-4

Bottom Width

.border-bottom-5

Left Width

.border-start-2

Width Comparison

.border-1

.border-2

.border-3

.border-4

.border-5

<!-- Border width utilities -->
<div class="border border-1">1px border (default)</div>
<div class="border border-2">2px border</div>
<div class="border border-3">3px border</div>
<div class="border border-4">4px border</div>
<div class="border border-5">5px border</div>

<!-- Side-specific border widths -->
<div class="border-top border-top-3">3px top border</div>
<div class="border-end border-end-4">4px right border</div>
<div class="border-bottom border-bottom-5">5px bottom border</div>
<div class="border-start border-start-2">2px left border</div>

<!-- Combined width and color -->
<div class="border border-3 border-primary">3px primary border</div>
<div class="border-top border-top-4 border-success">4px success top border</div>

<!-- Different widths on different sides -->
<div class="border-top border-top-5 
            border-end border-end-3 
            border-bottom border-bottom-2 
            border-start border-start-1">
  Varying border widths
</div>

<!-- Form elements with thick borders -->
<input type="text" class="form-control border border-3" placeholder="Thick border">
<button class="btn btn-primary border border-2">Button with thick border</button>

<!-- Cards with varying border widths -->
<div class="card border border-3">
  <div class="card-body">Card with thick border</div>
</div>

<div class="card border-top border-top-5">
  <div class="card-body">Card with thick top border</div>
</div>

<!-- Progress indicators -->
<div class="progress" style="height: 20px;">
  <div class="progress-bar border border-2 border-white" 
       style="width: 75%">75%</div>
</div>

Border Radius

Rounded Corners

Small

.rounded

Medium

.rounded-3

Large

.rounded-5

Circle

.rounded-circle

Top Rounded

.rounded-top

Right Rounded

.rounded-end

Bottom Rounded

.rounded-bottom

Left Rounded

.rounded-start

Top Start Rounded

.rounded-top-start

No Rounding

.rounded-0

Pill Shape

.rounded-pill

<!-- Border radius utilities -->
<div class="rounded">Small radius (default)</div>
<div class="rounded-0">No radius (square)</div>
<div class="rounded-1">1 radius level</div>
<div class="rounded-2">2 radius level</div>
<div class="rounded-3">3 radius level</div>
<div class="rounded-4">4 radius level</div>
<div class="rounded-5">5 radius level (largest)</div>
<div class="rounded-circle">Circle (50% radius)</div>
<div class="rounded-pill">Pill shape (very rounded)</div>

<!-- Side-specific rounding -->
<div class="rounded-top">Top corners rounded</div>
<div class="rounded-end">Right corners rounded (RTL: left)</div>
<div class="rounded-bottom">Bottom corners rounded</div>
<div class="rounded-start">Left corners rounded (RTL: right)</div>

<!-- Corner-specific rounding -->
<div class="rounded-top-start">Top left corner rounded</div>
<div class="rounded-top-end">Top right corner rounded</div>
<div class="rounded-bottom-start">Bottom left corner rounded</div>
<div class="rounded-bottom-end">Bottom right corner rounded</div>

<!-- Combined examples -->
<div class="rounded-top rounded-3">Large radius on top only</div>
<div class="rounded-start rounded-pill">Pill shape on left side</div>

<!-- Images with rounded corners -->
<img src="image.jpg" class="img-fluid rounded" alt="Rounded image">
<img src="avatar.jpg" class="rounded-circle" alt="Circular avatar" style="width: 100px; height: 100px;">

<!-- Buttons with rounded corners -->
<button class="btn btn-primary rounded-pill">Pill button</button>
<button class="btn btn-success rounded-5">Very rounded button</button>

<!-- Cards with rounded corners -->
<div class="card rounded-3">
  <div class="card-body">Card with large radius</div>
</div>

<div class="card rounded-top rounded-5">
  <div class="card-body">Card with large top radius only</div>
</div>

<!-- Form elements -->
<input type="text" class="form-control rounded-pill" placeholder="Pill input">
<div class="input-group rounded-pill">
  <input type="text" class="form-control rounded-start-pill">
  <button class="btn btn-primary rounded-end-pill">Search</button>
</div>

<!-- Badges with rounded corners -->
<span class="badge bg-primary rounded-pill">Pill badge</span>
<span class="badge bg-success rounded-3">Rounded badge</span>

Responsive Borders

Responsive Border Display

.border .border-md-0 .border-lg-top

Border on mobile, none on tablet, top only on desktop

.border-top .border-md .border-lg-0

Top border on mobile, all borders on tablet, none on desktop

Responsive Border Radius

.rounded-0 .rounded-md .rounded-lg-5

Square on mobile, default on tablet, large on desktop

.rounded-pill .rounded-md-0 .rounded-lg-pill

Pill on mobile, square on tablet, pill on desktop

Responsive Border Color

.border-primary .border-md-success .border-lg-danger

Primary on mobile, success on tablet, danger on desktop

Breakpoint Table

Breakpoint	Class Prefix	Example	Behavior
All	`border-`	`.border`	Always
≥576px	`border-sm-`	`.border-sm`	On sm+ screens
≥768px	`border-md-`	`.border-md-0`	On md+ screens
≥992px	`border-lg-`	`.border-lg-top`	On lg+ screens
≥1200px	`border-xl-`	`.border-xl-end`	On xl+ screens

<!-- Responsive border utilities -->
<div class="border border-md-0 border-lg">
  <!-- Border on mobile, none on tablet, border on desktop -->
</div>

<div class="border-top border-md border-lg-0">
  <!-- Top border on mobile, all borders on tablet, none on desktop -->
</div>

<!-- Responsive border colors -->
<div class="border border-primary border-md-success border-lg-warning">
  <!-- 
    Primary on mobile
    Success on tablet
    Warning on desktop
  -->
</div>

<!-- Responsive border radius -->
<div class="rounded-0 rounded-md rounded-lg-5">
  <!-- 
    Square on mobile
    Default radius on tablet
    Large radius on desktop
  -->
</div>

<div class="rounded-pill rounded-md-0 rounded-lg-circle">
  <!-- 
    Pill on mobile
    Square on tablet
    Circle on desktop
  -->
</div>

<!-- Responsive border width -->
<div class="border border-1 border-md-3 border-lg-5">
  <!-- 
    1px on mobile
    3px on tablet
    5px on desktop
  -->
</div>

<!-- Side-specific responsive borders -->
<div class="border-top border-md-end border-lg-bottom">
  <!-- 
    Top on mobile
    Right on tablet
    Bottom on desktop
  -->
</div>

<!-- Practical examples -->
<!-- Mobile-optimized cards -->
<div class="card border-0 border-md">
  <!-- No border on mobile, border on tablet+ -->
</div>

<!-- Desktop-optimized navigation -->
<nav class="navbar border-bottom border-md-0">
  <!-- Bottom border on mobile, none on desktop -->
</nav>

<!-- Adaptive form elements -->
<input type="text" class="form-control rounded-pill rounded-md-0">
<!-- Pill on mobile, square on desktop -->

<!-- Responsive button borders -->
<button class="btn btn-primary border border-3 border-md-1">
  <!-- Thick border on mobile, thin on desktop -->
</button>

Practical Examples

User Profile Card

John Doe

Senior Developer

Projects

156

Contributions

Last active: 2 hours ago

<!-- Profile card with borders -->
<div class="card border-primary border-3 rounded-3 shadow-sm">
  <div class="card-body text-center">
    <!-- Avatar with border -->
    <div class="rounded-circle border border-3 border-primary"
         style="width: 100px; height: 100px;">
      JD
    </div>
    
    <!-- Name and title -->
    <h4 class="card-title">John Doe</h4>
    <p class="text-muted">Senior Developer</p>
    
    <!-- Stats with borders -->
    <div class="border-top border-bottom py-3 mb-3">
      <div class="row">
        <div class="col-6 border-end">
          <div class="h4 mb-0">42</div>
          <small class="text-muted">Projects</small>
        </div>
        <div class="col-6">
          <div class="h4 mb-0">156</div>
          <small class="text-muted">Contributions</small>
        </div>
      </div>
    </div>
    
    <!-- Buttons with rounded corners -->
    <div class="d-grid gap-2">
      <button class="btn btn-primary rounded-pill">View Profile</button>
      <button class="btn btn-outline-primary rounded-pill">Send Message</button>
    </div>
  </div>
  
  <!-- Footer without top border -->
  <div class="card-footer bg-transparent border-top-0">
    <small class="text-muted">Last active: 2 hours ago</small>
  </div>
</div>

Status Indicators & Alerts

Status Indicators

Alerts with Borders

Primary Alert: With thick top border

Success Alert: With left border accent

Warning Alert: With rounded corners

Progress with Borders

75%

40%

30%

<!-- Status indicator with border -->
<div class="position-relative">
  <!-- Main circle -->
  <div class="rounded-circle bg-success" 
       style="width: 60px; height: 60px;"></div>
  
  <!-- Status dot with border -->
  <span class="position-absolute bottom-0 end-0 
               border border-3 border-white rounded-circle 
               bg-success" 
        style="width: 20px; height: 20px;"></span>
</div>

<!-- Alert with border accent -->
<div class="alert border border-primary border-start-0 border-end-0 
            border-top-0 border-5">
  <strong>Alert:</strong> With thick top border only
</div>

<div class="alert border border-success border-start-5">
  <strong>Alert:</strong> With left border accent
</div>

<!-- Progress bars with borders -->
<div class="progress">
  <div class="progress-bar border border-2 border-white rounded-start" 
       style="width: 75%">
    75%
  </div>
</div>

<div class="progress">
  <div class="progress-bar bg-success border border-2 border-white" 
       style="width: 40%">
    40%
  </div>
  <div class="progress-bar bg-warning border border-2 border-white" 
       style="width: 30%">
    30%
  </div>
</div>

Best Practices

Border Utility Guidelines

✅ Use .border for subtle separation and card outlines
✅ Use .border-top, .border-bottom for section dividers
✅ Use colored borders (.border-primary) for status indicators and emphasis
✅ Use .rounded for modern, friendly interfaces
✅ Use .rounded-pill for buttons, badges, and search inputs
✅ Use .rounded-circle for avatars and circular elements
✅ Use responsive borders for mobile-optimized layouts
✅ Maintain consistency in border usage across your design system

Common Border Patterns

Pattern	Classes	Result	Use Case
Card with accent border	`.border-start.border-start-5.border-primary`	Left accent border	Highlighted cards, notifications
Section divider	`.border-top.border-bottom`	Top and bottom borders	Content separation
Modern button	`.rounded-pill.border.border-2`	Pill button with border	Call-to-action buttons
Avatar frame	`.rounded-circle.border.border-3.border-white`	Circular avatar with frame	User profiles, team members
Status indicator	`.border.border-3.border-success.rounded-circle`	Circular status dot	Online status, availability
Input focus style	`.border.border-2.border-primary`	Thick colored border	Form input focus states

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial