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">
