Home Get StartedTokensDocsComponents

Border Side

Utilities for controlling the border of an element, including border style and sides.

Contents

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

ClassProperties
.borderborder: 1px solid rgb(235, 236, 240);
.border-0border: 0;
.border-topborder-top: 1px solid rgb(235, 236, 240);
.border-top-0border-top: 0;
.border-bottomborder-bottom: 1px solid rgb(235, 236, 240);
.border-bottom-0border-bottom: 0;
.border-startborder-left: 1px solid rgb(235, 236, 240);
.border-start-0border-left: 0;
.border-endborder-right: 1px solid rgb(235, 236, 240);
.border-end-0border-right: 0;

Basic usage

Enable border

Add borders to an element.

border

border-top

border-end

border-bottom

border-start

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

Remove sides

Use the border-top-0, border-end-0 or border-bottom-0 remove the specified one side border.

border-top-0

border-end-0

border-bottom-0

border-start-0

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

Remove all border

Use the border-0 to remove an element’s border.

<div class="border border-0 ..."></div>
Edit this page on Github
Last updated on April 6, 2024