Border

Border utilities provide a complete system for controlling borders, logical sides, colors, widths, styles, and corner radius.

The documentation below matches the current border.css implementation and includes every available utility.

Getting Started

Use .border as the foundation utility, then compose width, style, color, side, and radius classes as needed.

<div class="border rounded-2 p-4">Basic bordered container</div>

top

right

bottom

left

border

border-top

border-bottom

border-start

border-end

border-x

border-y

Border Sides

<div class="border p-4"> Border on all sides </div>
<div class="border-top p-3"> Top divider </div>
<div class="border-bottom p-3"> Bottom divider </div>
<div class="border-start p-3"> Start divider </div>
<div class="border-end p-3"> End divider </div>

Inline and Block Borders

<div class="border-x p-3">
  Inline borders only
</div>

<div class="border-y p-3">
  Block borders only
</div>

Border Removal

To display an HTML element without a border, you should add border-0 to it.

Remove Individual Sides

<div class="border border-top-0 p-3">
  No top border
</div>

<div class="border border-bottom-0 p-3">No bottom border</div>

<div class="border border-start-0 p-3">No start border</div>

<div class="border border-end-0 p-3">
  No end border
</div>

top

right

bottom

left

border-0

border-top-0

border-bottom-0

border-start-0

border-end-0

Border Width

The border-width utilities adjust the thickness of element borders using a simple, consistent scale. To change the measurements, modify the --b-width value on the element to which you've applied border.

<div class="border">
  1px border
</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>

1px

border

2px

border-2

3px

border-3

4px

border-4

5px

border-5

Border Styles

<div class="border border-solid p-3">
  Solid
</div>

<div class="border border-dashed p-3">Dashed</div>

<div class="border border-dotted p-3">Dotted</div>

<div class="border border-none p-3">
  None
</div>

solid

border-solid

dashed

border-dashed

dotted

border-dotted

none

border-none

Border Colors

<div class="border border-primary p-3">Primary</div>
<div class="border border-success p-3">Success</div>
<div class="border border-danger p-3">Danger</div>
<div class="border border-warning p-3">Warning</div>
<div class="border border-info p-3">Info</div>
<div class="border border-light p-3">Light</div>
<div class="border border-dark p-3">Dark</div>
<div class="border border-white p-3">White</div>
<div class="border border-transparent p-3">Transparent</div>

primary

success

danger

warning

info

light

dark

white

transparent

Radius Scale

<div class="border rounded-0 p-3">rounded-0</div>
<div class="border rounded-1 p-3">rounded-1</div>
<div class="border rounded-2 p-3">rounded-2</div>
<div class="border rounded-3 p-3">rounded-3</div>
<div class="border rounded-4 p-3">rounded-4</div>
<div class="border rounded-5 p-3">rounded-5</div>

0px

rounded-0

4px

rounded-1

8px

rounded-2

12px

rounded-3

16px

rounded-4

24px

rounded-5

Shape Utilities

<img class="rounded-circle" src="/avatar.jpg" alt="Avatar" />

<span class="border rounded-pill px-3 py-1">
  Pill
</span>

img

rounded-circle

Pill

rounded-pill

Directional Radius

Edge Radius

<div class="border rounded-top p-3">
  Rounded top
</div>

<div class="border rounded-bottom p-3">Rounded bottom</div>

<div class="border rounded-start p-3">Rounded start</div>

<div class="border rounded-end p-3">
  Rounded end
</div>

rounded-top

rounded-bottom

rounded-start

rounded-end

Corner Radius

<div class="border rounded-ts p-3">
  Top start
</div>

<div class="border rounded-te p-3">Top end</div>

<div class="border rounded-bs p-3">Bottom start</div>

<div class="border rounded-be p-3">
  Bottom end
</div>

rounded-ts

rounded-te

rounded-bs

rounded-be

Class Reference

Class	Description
`border`	All sides border.
`border-top`	Top border.
`border-bottom`	Bottom border.
`border-start`	Logical start border.
`border-end`	Logical end border.
`border-x`	Inline borders.
`border-y`	Block borders.
`border-0`	Remove all borders.
`border-top-0`	Remove top border.
`border-bottom-0`	Remove bottom border.
`border-start-0`	Remove start border.
`border-end-0`	Remove end border.
`border-1, border-2, border-3`	Border widths.
`border-solid, border-dashed, border-dotted, border-none`	Border styles.
`border-primary, success, danger, warning, info, light, dark, white, transparent`	Border colors.
`rounded-0 → rounded-5`	Radius scale.
`rounded-circle`	Circular shape.
`rounded-pill`	Pill shape.
`rounded-top, bottom, start, end`	Directional radius.
`rounded-ts, te, bs, be`	Single-corner radius.