Border Utility
Use border utilities to quickly style the border and border-radius of an element.
Additive Border
You can add border to any side of an element with border utilities classes.
| Class Reference | Details |
|---|---|
.border |
Add border in all sides of an element |
.border-{top|bottom|left|right} |
Add border in relavent side |
Uses Example
<div class="border"></div> <div class="border-top"></div>
Subtractive Border
You can remove border to a single side of an element with below border utilities classes.
| Class Reference | Details |
|---|---|
.border-0 |
Remove border from all sides of an element |
.border-{top|bottom|left|right}-0 |
Remove border from specific side of an element |
Uses Example
<div class="border-0"></div> <div class="border-top-0"></div>
Border Color
Change the border color using utilities built on our theme colors.
| Class Reference | Value |
|---|---|
.border-{value} |
primary | secondary | success | warning | danger | info | dark | gray | light | white |
Uses Example
<div class="border border-primary"></div>
Border Radius
Use these utility classes to set radius to the element.
| Class Reference | Details |
|---|---|
.rounded |
Apply rounded corner of an element |
.rounded-{top|bottom|left|right} |
Apply rounded on specific corner of an element |
.rounded-circle |
Apply full circle box of an element |
.rounded-pill |
Apply pill rounded corner of an element |
.rounded-0 |
Remove rounded egde from an element |
.rounded-{sm|lg} |
Apply small and large rounded corner of an element |
Uses Example
<img src="..." alt="..." class="rounded"> <img src="..." alt="..." class="rounded-top">