Metronic extends
										
Bootstrap Borders   in
										
src/sass/components/helpers/_borders.scssto provide additional border utility classes to cover its own design system.
 
									
									
									
										
										
										 
										
										
										Use
										.border-dashedor
										.border-dottedclasses to set an element's border style. For border directions use
										.border-{direction}-dashedor
										.border-{direction}-dottedclasses format.
										
										
										Where
										
directionis one of:
										
											
											top- for classes that set border top style 
											
											bottom- for classes that set border bottom style 
											
											end- for classes that set border right style 
											
											start- for classes that set border start style 
										 
											
												
													default style
													.border-dotted
													.border-dashed
													.border-bottom-dashed
													.border-end-dashed
												 
											 
										 
										
										
										
											
											
												copy 
												
													
<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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.border-hoverto display an element's border on hover.
										
										
										
										
										
										
											
											
												copy 
												
													
<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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.border-activeto display an element's border when
										.activeclass applied.
										
										
										
										
										
										
											
											
												copy 
												
													
<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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.border-transparentto set an element's border color to tranparent.
										
										
										
										
										
										
											
											
												copy 
												
													
<div class="border border-transparent">
    default
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										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
												 
											 
										 
										
										
										
											
											
												copy 
												
													
<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>