Borders, radius and dividers
Borders
Use border classes to add or remove borders on your element.
Here are all the supported classes:
.border
.border-top
.border-bottom
.border-left
.border-right
.border-0
.border-top-0
.border-bottom-0
.border-left-0
.border-right-0
.border
.border-top
.border-right
.border-bottom
.border-left
<div class="border"> ... </div>
<div class="border-top"> ... </div>
<div class="border-right"> ... </div>
<div class="border-bottom"> ... </div>
<div class="border-left"> ... </div>
.border-0
.border-top-0
.border-right-0
.border-bottom-0
.border-left-0
<div class="border-0"> ... </div>
<div class="border-top-0"> ... </div>
<div class="border-right-0"> ... </div>
<div class="border-bottom-0"> ... </div>
<div class="border-left-0"> ... </div>
Border radius
Use border radius classes to add border-radius or to remove it from on your element.
Here are all the supported classes:
.rounded-0
.rounded-4
or.rounded
.rounded-8
.rounded-12
.rounded-24
.rounded-circle
.rounded-top
,.rounded-top-left
,.rounded-top-right
,.rounded-right
,.rounded-bottom
,.rounded-bottom-left
,.rounded-bottom-right
,.rounded-left
.rounded-0
.rounded-4
.rounded-8
.rounded-12
.rounded-24
.rounded-circle
<div class="rounded-0"> ... </div>
<div class="rounded-4"> ... </div>
<div class="rounded-8"> ... </div>
<div class="rounded-12"> ... </div>
<div class="rounded-24"> ... </div>
<div class="rounded-circle"> ... </div>
.rounded-top
.rounded-top-left
.rounded-top-right
.rounded-right
.rounded-bottom
.rounded-bottom-left
.rounded-bottom-right
.rounded-left
<div class="rounded-top"> ... </div>
<div class="rounded-top-left"> ... </div>
<div class="rounded-top-right"> ... </div>
<div class="rounded-right"> ... </div>
<div class="rounded-bottom"> ... </div>
<div class="rounded-bottom-left"> ... </div>
<div class="rounded-bottom-right"> ... </div>
<div class="rounded-left"> ... </div>
Deprecated!
.rounded-5
, .rounded-10
, .rounded-20
are deprecated, will be removed soon.
Horizontal divider
hr
tag element (default)
hr
with .hr-disabled
(disabled state)
hr
with .hr-dotted
class
hr
with .hr-dotted
and .hr-disabled
(disabled state for dotted divider)
hr
with .hr-nc-dotted
class
hr
with .hr-nc-dotted
and .hr-disabled
(disabled state for nc dotted divider)
<hr>
<hr class="hr-disabled">
<hr class="hr-dotted">
<hr class="hr-dotted hr-disabled">
<hr class="hr-nc-dotted">
<hr class="hr-nc-dotted hr-disabled">