Contents
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
| Class | Properties |
|---|---|
.border | border: 1px solid rgb(235, 236, 240); |
.border-0 | border: 0; |
.border-top | border-top: 1px solid rgb(235, 236, 240); |
.border-top-0 | border-top: 0; |
.border-bottom | border-bottom: 1px solid rgb(235, 236, 240); |
.border-bottom-0 | border-bottom: 0; |
.border-start | border-left: 1px solid rgb(235, 236, 240); |
.border-start-0 | border-left: 0; |
.border-end | border-right: 1px solid rgb(235, 236, 240); |
.border-end-0 | border-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 edited by zhengchun on November 30, 2023