Border Width

Use border utilities to quickly style the border and border-radius of an element.


Class
Properties
border-0
border
border-2
border-3
border-4
border-5
border-6
border-7
border-8
border-top-0
border-top
border-top-2
border-top-3
border-top-4
border-top-5
border-top-6
border-top-7
border-top-8
border-end-0
border-end
border-end-2
border-end-3
border-end-4
border-end-5
border-end-6
border-end-7
border-end-8
border-bottom-0
border-bottom
border-bottom-2
border-bottom-3
border-bottom-4
border-bottom-5
border-bottom-6
border-bottom-7
border-bottom-8
border-start-0
border-start
border-start-2
border-start-3
border-start-4
border-start-5
border-start-6
border-start-7
border-start-8

All sides

Use border utilities to add or remove an element’s borders. Choose from .border, .border-0, .border-2, .border-4, and .border-8 to set the border on all sides:

<div class="border"></div>
<div class="border-0"></div>
<div class="border-2"></div>
<div class="border-4"></div>
<div class="border-8"></div>

Individual sides

Or, use the .border-SIDE, .border-SIDE-0, .border-SIDE-2, .border-SIDE-4, and .border-SIDE-8 to set the border on one side only:

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Responsive

Responsive variations also exist for each border value. Use the .border-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing border utility.

<!-- All sides -->
<div class="border-md-4 ..."></div>

<!-- Individual side -->
<div class="border-top-md-2 ..."></div>
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->