Overview
Metronic extends Bootstrap Borders
in
src/assets/sass/core/components/helpers/_borders.scss to provide additional border utility classes to cover its own design system.
Border Styles
Use
.border-dashed or .border-dotted classes to set an element's border style.
For border directions use .border-{direction}-dashed or .border-{direction}-dotted classes format.
Where
direction is one of:
top- for classes that set border top stylebottom- for classes that set border bottom styleend- for classes that set border right stylestart- for classes that set border start style
default style
.border-dotted
.border-dashed
.border-bottom-dashed
.border-end-dashed
<div class="border">
default style
</div>
<div class="border-gray-300 border-dotted">
.border-dotted
</div>
<div class="border-gray-300 border-dashed">
.border-dashed
</div>
<div class="border-gray-300 border-bottom-dashed">
.border-bottom-dashed
</div>
<div class="border-gray-300 border-end-dashed">
.border-end-dashed
</div>Hover State
Use
.border-hover to display an element's border on hover.
default
gray-500
primary
<div class="border border-hover">
default
</div>
<div class="border border-gray-500 border-hover">
gray-500
</div>
<div class="border border-primary border-hover">
primary
</div>Active State
Use
.border-active to display an element's border when .active class applied.
default
gray-500
primary
<div class="border border-active active">
default
</div>
<div class="border border-gray-500 border-active active">
gray-500
</div>
<div class="border border-primary border-active active">
primary
</div>Transparent Border
Use
.border-transparent to set an element's border color to tranparent.
tranparent
border
border
<div class="border border-transparent">
default
</div>Border Gray Colors
Use
.border-gray-{100, 200, 300, 400, 500, 600, 700, 800, 900} to set an element's border color.
.border-gray-100
.border-gray-200
.border-gray-300
.border-gray-400
.border-gray-500
.border-gray-600
.border-gray-700
.border-gray-800
.border-gray-900
<div class="border border-gray-100"></div>
<div class="border border-gray-200"></div>
<div class="border border-gray-300"></div>
<div class="border border-gray-400"></div>
<div class="border border-gray-500"></div>
<div class="border border-gray-600"></div>
<div class="border border-gray-700"></div>
<div class="border border-gray-800"></div>
<div class="border border-gray-900"></div>
2024©
Keenthemes
