Border & Radius
All modular elements can be readily used and customized in every layout across pages.
For detail documentation, View Border & Radius on Bootstrap⟶
Border
Use border utilities to quickly style theborder
of an element. Great for images, buttons, or any other element.
The classes are named using the format border-{side}
for xs
and border-{side}-{breakpoint}-
for sm
, md
, lg
, xl
, and xxl
.
Where side is one of:
top
- for classes that set style forborder-top
bottom
- for classes that set style forborder-bottom
start
- for classes that set style forborder-start
end
- for classes that set style formargin-right
x
- for classes that set both*-left
and*-right
y
- for classes that set both*-top
and*-bottom
- blank - for classes that set the
border
style on all 4 side of the element.
Classes for adding borders
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
Classes for removing borders
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
Classes for dashed borders
<span class="border border-dashed"></span>
<span class="border-top border-dashed"></span>
<span class="border-end border-dashed"></span>
<span class="border-bottom border-dashed"></span>
<span class="border-start border-dashed"></span>
Radius
<span class="border rounded-0"></span>
<span class="border rounded-1"></span>
<span class="border rounded-3"></span>
<span class="border rounded-capsule py-4 px-6"></span>
<span class="border rounded-circle"></span>