Borders

Border utilities add or remove borders on any side, colour them with the theme, set their width from 1 to 5 and fade them with border-opacity-*. Radius utilities round all corners, one side or turn an element into a circle or pill, from rounded-0 up to rounded-5.

1Add borders

border on all sides, or border-top, border-end, border-bottom and border-start for one side.

border

border-top

border-end

border-bottom

border-start

<div class="row g-2">
  <div class="col-6 col-md">
    <div class="bg-body-tertiary p-3 text-center border">
      <code class="small">border</code>
    </div>
  </div>
  <div class="col-6 col-md">
    <div class="bg-body-tertiary p-3 text-center border-top">
      <code class="small">border-top</code>
    </div>
  </div>
  <div class="col-6 col-md">
    <div class="bg-body-tertiary p-3 text-center border-end">
      <code class="small">border-end</code>
    </div>
  </div>
  <div class="col-6 col-md">
    <div class="bg-body-tertiary p-3 text-center border-bottom">
      <code class="small">border-bottom</code>
    </div>
  </div>
  <div class="col-6 col-md">
    <div class="bg-body-tertiary p-3 text-center border-start">
      <code class="small">border-start</code>
    </div>
  </div>
</div>

2Remove borders

border-0 removes every border, border-top-0 and friends remove one side.

border-0

border-top-0

border-end-0

border-bottom-0

<div class="row g-2">
  <div class="col-6 col-md-3">
    <div class="bg-body-tertiary p-3 text-center border border-0">
      <code class="small">border-0</code>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="bg-body-tertiary p-3 text-center border border-top-0">
      <code class="small">border-top-0</code>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="bg-body-tertiary p-3 text-center border border-end-0">
      <code class="small">border-end-0</code>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="bg-body-tertiary p-3 text-center border border-bottom-0">
      <code class="small">border-bottom-0</code>
    </div>
  </div>
</div>

3Border colours

border-{colour} uses the theme colours, including border-white and border-black.

primary

success

danger

warning

info

dark

<div class="d-flex flex-wrap gap-2">
  <div class="border border-2 border-primary rounded-2 px-3 py-2">
    <code class="small">primary</code>
  </div>
  <div class="border border-2 border-success rounded-2 px-3 py-2">
    <code class="small">success</code>
  </div>
  <div class="border border-2 border-danger rounded-2 px-3 py-2">
    <code class="small">danger</code>
  </div>
  <div class="border border-2 border-warning rounded-2 px-3 py-2">
    <code class="small">warning</code>
  </div>
  <div class="border border-2 border-info rounded-2 px-3 py-2">
    <code class="small">info</code>
  </div>
  <div class="border border-2 border-dark rounded-2 px-3 py-2">
    <code class="small">dark</code>
  </div>
</div>

4Subtle border colours

border-{colour}-subtle is the soft partner of bg-{colour}-subtle.

border-primary-subtle

border-success-subtle

border-secondary-subtle

<div class="d-grid gap-2">
  <div class="border border-primary-subtle bg-primary-subtle rounded-3 p-2 small">
    border-primary-subtle
  </div>
  <div class="border border-success-subtle bg-success-subtle rounded-3 p-2 small">
    border-success-subtle
  </div>
  <div class="border border-secondary-subtle rounded-3 p-2 small">
    border-secondary-subtle
  </div>
</div>

5Border width

border-1 to border-5 set the thickness.

1

2

3

4

5

<div class="d-flex flex-wrap gap-2">
  <div class="border border-primary border-1 rounded-2 p-3">
    <code class="small">1</code>
  </div>
  <div class="border border-primary border-2 rounded-2 p-3">
    <code class="small">2</code>
  </div>
  <div class="border border-primary border-3 rounded-2 p-3">
    <code class="small">3</code>
  </div>
  <div class="border border-primary border-4 rounded-2 p-3">
    <code class="small">4</code>
  </div>
  <div class="border border-primary border-5 rounded-2 p-3">
    <code class="small">5</code>
  </div>
</div>

6Border opacity

border-opacity-10 to -100 fade the border colour without touching the content.

100

75

50

25

10

<div class="d-flex flex-wrap gap-2">
  <div class="border border-3 border-danger border-opacity-100 rounded-3 p-3">
    <code class="small">100</code>
  </div>
  <div class="border border-3 border-danger border-opacity-75 rounded-3 p-3">
    <code class="small">75</code>
  </div>
  <div class="border border-3 border-danger border-opacity-50 rounded-3 p-3">
    <code class="small">50</code>
  </div>
  <div class="border border-3 border-danger border-opacity-25 rounded-3 p-3">
    <code class="small">25</code>
  </div>
  <div class="border border-3 border-danger border-opacity-10 rounded-3 p-3">
    <code class="small">10</code>
  </div>
</div>

7Rounded sizes

rounded-0 to rounded-5 step the corner radius up.

0

1

2

3

4

5

<div class="d-flex flex-wrap gap-2">
  <div class="bg-primary-subtle border border-primary-subtle rounded-0 p-3">
    <code class="small">0</code>
  </div>
  <div class="bg-primary-subtle border border-primary-subtle rounded-1 p-3">
    <code class="small">1</code>
  </div>
  <div class="bg-primary-subtle border border-primary-subtle rounded-2 p-3">
    <code class="small">2</code>
  </div>
  <div class="bg-primary-subtle border border-primary-subtle rounded-3 p-3">
    <code class="small">3</code>
  </div>
  <div class="bg-primary-subtle border border-primary-subtle rounded-4 p-3">
    <code class="small">4</code>
  </div>
  <div class="bg-primary-subtle border border-primary-subtle rounded-5 p-3">
    <code class="small">5</code>
  </div>
</div>

8Circle and pill

rounded-circle for equal width and height, rounded-pill for long shapes.

OL rounded-pill

<div class="d-flex flex-wrap align-items-center gap-3">
  <img src="../assets/img/avatar-1.svg" alt="Jonah Mensah" width="64" height="64" class="rounded-circle border border-3 border-primary"> <span class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" style="width:48px;height:48px">OL</span> <span class="bg-body-tertiary border rounded-pill px-4 py-2">rounded-pill</span> 
</div>

9Round one side

rounded-top, rounded-end, rounded-bottom and rounded-start round two corners of a side.

rounded-top-4

rounded-end-4

rounded-bottom-4

rounded-start-4

<div class="d-flex flex-wrap gap-2">
  <div class="bg-info-subtle p-3 rounded-top-4">
    <code class="small">rounded-top-4</code>
  </div>
  <div class="bg-info-subtle p-3 rounded-end-4">
    <code class="small">rounded-end-4</code>
  </div>
  <div class="bg-info-subtle p-3 rounded-bottom-4">
    <code class="small">rounded-bottom-4</code>
  </div>
  <div class="bg-info-subtle p-3 rounded-start-4">
    <code class="small">rounded-start-4</code>
  </div>
</div>

10Input group look

Pieces joined with rounded-start / rounded-end and border-end-0 read as one control.

<div class="d-flex" style="max-width:22rem">
  <span class="border border-end-0 rounded-start-3 bg-body-tertiary px-3 d-flex align-items-center"><i class="bi bi-search" aria-hidden="true"></i></span> 
  <label class="visually-hidden" for="ut-search-1247">Search</label>
  <input id="ut-search-1247" type="search" class="form-control rounded-0" placeholder="Search process"> 
  <button type="button" class="btn btn-primary rounded-0 rounded-end-3">Go</button>
</div>

11Divided list

border-bottom on each row except the last separates list items.

General practiceOct 16, 2025
Health check-upsMay 9, 2026
Lab testsOct 10, 2026

<ul class="list-unstyled mb-0 border rounded-3 px-3">
  <li class="py-2 border-bottom d-flex justify-content-between"><span>General practice</span><span class="text-body-secondary small">Oct 16, 2025</span></li>
  <li class="py-2 border-bottom d-flex justify-content-between"><span>Health check-ups</span><span class="text-body-secondary small">May 9, 2026</span></li>
  <li class="py-2 d-flex justify-content-between"><span>Lab tests</span><span class="text-body-secondary small">Oct 10, 2026</span></li>
</ul>

12Selected option card

A thick primary border marks the chosen option; others keep the default border.

Standard

3-5 days

Express

1-2 days

Pickup

Edinburgh

<div class="row g-2">
  <div class="col-sm-4">
    <div class="border rounded-4 p-3 h-100">
      <div class="fw-semibold">
        Standard
      </div>
      <div class="small text-body-secondary">
        3-5 days
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="border border-2 border-primary rounded-4 p-3 h-100 bg-primary-subtle">
      <div class="fw-semibold">
        <i class="bi bi-check-circle-fill" aria-hidden="true"></i> Express
      </div>
      <div class="small">
        1-2 days
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="border rounded-4 p-3 h-100">
      <div class="fw-semibold">
        Pickup
      </div>
      <div class="small text-body-secondary">
        Edinburgh
      </div>
    </div>
  </div>
</div>

13Avatar stack

Overlapping avatars get a white border so each edge stays visible.

<div class="d-flex align-items-center">
  <img src="../assets/img/avatar-1.svg" alt="Liam Okafor" width="40" height="40" class="rounded-circle border border-2 border-white"> <img src="../assets/img/avatar-2.svg" alt="Lucas Delgado" width="40" height="40" class="rounded-circle border border-2 border-white" style="margin-left:-12px"> <img src="../assets/img/avatar-3.svg" alt="Aria Whitaker" width="40" height="40" class="rounded-circle border border-2 border-white" style="margin-left:-12px"> <span class="rounded-circle border border-2 border-white bg-body-secondary small fw-semibold d-inline-flex align-items-center justify-content-center" style="width:40px;height:40px;margin-left:-12px">+3</span> 
</div>

14Timeline with border-start

A left border on the list and small dots positioned on it draw a vertical timeline.

Order placed
Nov 12, 2025
Packed
Feb 14, 2026
Out for delivery
Expected Jan 8, 2027

<ul class="list-unstyled border-start border-2 ms-2 ps-3 mb-0">
  <li class="position-relative pb-3"><span class="position-absolute top-0 start-0 translate-middle-x bg-primary rounded-circle p-1" style="margin-left:-17px;margin-top:6px"></span><div class="fw-medium">Order placed</div><div class="small text-body-secondary">Nov 12, 2025</div></li>
  <li class="position-relative pb-3"><span class="position-absolute top-0 start-0 translate-middle-x bg-primary rounded-circle p-1" style="margin-left:-17px;margin-top:6px"></span><div class="fw-medium">Packed</div><div class="small text-body-secondary">Feb 14, 2026</div></li>
  <li class="position-relative"><span class="position-absolute top-0 start-0 translate-middle-x bg-secondary rounded-circle p-1" style="margin-left:-17px;margin-top:6px"></span><div class="fw-medium">Out for delivery</div><div class="small text-body-secondary">Expected Jan 8, 2027</div></li>
</ul>

15Image frame

border, p-1 and rounded-3 frame an image like a thumbnail.

A parent's guide to childhood vaccinations

<div class="d-flex flex-wrap gap-3">
  <img src="https://images.unsplash.com/photo-1584516150909-c43483ee7932?auto=format&fit=crop&w=800&h=800&q=70" alt="A parent&#39;s guide to childhood vaccinations" width="140" class="border p-1 rounded-3"> <img src="https://images.unsplash.com/photo-1581056771107-24ca5f033842?auto=format&fit=crop&w=800&h=800&q=70" alt="Our favourite tips for busy weeks" width="140" class="border border-3 border-dark-subtle rounded-4"> 
</div>

16Tab underline

border-bottom with border-3 border-primary marks the active item of a text tab bar.

<nav class="d-flex gap-4 border-bottom" aria-label="Sections">
  <a href="#" class="pb-2 border-bottom border-3 border-primary fw-semibold link-body-emphasis text-decoration-none" aria-current="page">Overview</a> <a href="#" class="pb-2 link-secondary text-decoration-none">Activity</a> <a href="#" class="pb-2 link-secondary text-decoration-none">Settings</a> 
</nav>

17Vertical rule between items

The vr helper draws a one pixel divider inside a flex row.

4.9

366 reviews

In stock

<div class="d-flex align-items-center gap-3 border rounded-3 px-3 py-2" style="max-width:26rem">
  <span class="small"><i class="bi bi-star-fill" aria-hidden="true"></i> 4.9</span> 
  <div class="vr">
  </div>
  <span class="small"><i class="bi bi-chat-dots" aria-hidden="true"></i> 366 reviews</span> 
  <div class="vr">
  </div>
  <span class="small"><i class="bi bi-box-seam" aria-hidden="true"></i> In stock</span> 
</div>

18Mixed radius shape

rounded-5 with one corner reset by rounded-bottom-0 / rounded-start-0 shapes speech or tag tiles.

rounded-5 rounded-bottom-0

rounded-5 rounded-start-0

<div class="d-flex flex-wrap gap-3">
  <div class="text-bg-primary rounded-5 rounded-bottom-0 px-4 py-3 small">
    rounded-5 rounded-bottom-0
  </div>
  <div class="bg-success-subtle text-success-emphasis rounded-5 rounded-start-0 px-4 py-3 small">
    rounded-5 rounded-start-0
  </div>
</div>

19Outlined feature tile

border-primary at low opacity with a matching hover-free tint creates a quiet highlight tile.

Certified specialists

Every detail is handled by people who care about getting it right.

<div class="border border-primary border-opacity-25 rounded-4 p-4" style="max-width:24rem">
  <div class="text-primary fs-3 mb-2">
    <i class="bi bi-layers" aria-hidden="true"></i>
  </div>
  <h3 class="h6 fw-semibold">Certified specialists</h3>
  <p class="small mb-0 text-body-secondary">Every detail is handled by people who care about getting it right.</p>
</div>

20Notice with top accent

border-top border-4 border-info on a card-like box.

Maintenance window

Feb 10, 2027, 17:00

<div class="border border-top-0 rounded-bottom-3 overflow-hidden" style="max-width:26rem">
  <div class="border-top border-4 border-info">
  </div>
  <div class="p-3">
    <div class="fw-semibold mb-1">
      <i class="bi bi-info-circle" aria-hidden="true"></i> Maintenance window
    </div>
    <div class="small text-body-secondary">
      Feb 10, 2027, 17:00
    </div>
  </div>
</div>