Class	Properties
`.border-0`	border-width: 0;
`.border-1`	border-width: 1px;
`.border-2`	border-width: 2px;
`.border-3`	border-width: 3px;
`.border-4`	border-width: 4px;
`.border-5`	border-width: 5px;

Basic usage

All sides

Use the border with the border-2, border-4, or border-5 utilities to set the border width for all sides of an element.

border

border-2

border-4

border-5

<div class="border border-secondary ..."></div>
<div class="border border-2 border-secondary ..."></div>
<div class="border border-4 border-secondary ..."></div>
<div class="border border-5 border-secondary ..."></div>

Individual sides

Use the border-{side} with border-2, border-3 or border-5 utilities to set the border width for one side of an element.

border-top

border-end

border-bottom

border-start

<div class="border-top border-4 border-secondary ..."></div>
<div class="border-end border-4 border-secondary ..."></div>
<div class="border-bottom border-4 border-secondary ..."></div>
<div class="border-start border-4 border-secondary ..."></div>

Horizontal and vertical sides

Use the border-{side} and border-{width} utilities to set the border width on two sides of an element at the same time.

<div class="border-top border-bottom border-4 border-secondary ..."></div>
<div class="border-end border-start border-4 border-secondary ..."></div>

Edit this page on Github

Last edited by zhengchun on November 30, 2023

Border Width

Basic usage

All sides

Individual sides

Horizontal and vertical sides