MASTORSCDN BORDER DOCUMENTATION

Preview Class Name HTML Declaration Copy
Border Sizes
Content
 .border-1 
<div class="border-1">Content</div>
Content
 .border-5 
<div class="border-5">Content</div>
Border Colors
Red Border
 .b-Red-500 
<div class="border-1 b-Red-500">Red Border</div>
Border Radius (All Sides)
Rounded
 .b-rad-05 
<div class="border-1 b-rad-05">Rounded</div>
Very Rounded
 .b-rad-25 
<div class="border-1 b-rad-25">Very Rounded</div>
Border Radius (Specific Corners)
Top-Left Rounded
 .b-rad-lt-10 or .b-rad-tl-10 
<div class="border-1 b-rad-lt-10">Top-Left Rounded</div>
Bottom-Right Rounded
 .b-rad-br-25 or .b-rad-rb-25 
<div class="border-1 b-rad-br-25">Bottom-Right Rounded</div>
Border Sides (Single)
Top Border
 .b-t-1-solid 
<div class="border-1 b-t-1-solid b-Red-500">Top Border</div>
Left Border
 .b-l-3-dashed 
<div class="border-1 b-l-3-dashed b-Blue-300">Left Border</div>
Border Sides (Two Sides)
Top & Bottom
 .b-tb-2-solid 
<div class="border-1 b-tb-2-solid b-Green-400">Top & Bottom</div>
Left & Right
 .b-lr-4-dotted 
<div class="border-1 b-lr-4-dotted b-Purple-600">Left & Right</div>
Border Sides (Three Sides)
Top, Bottom, Left
 .b-tbl-3-solid 
<div class="border-1 b-tbl-3-solid b-Green-300">Top, Bottom, Left</div>
Border Sides (All Sides)
All Sides
 .b-tblr-4-solid 
<div class="border-1 b-tblr-4-solid b-Purple-700">All Sides</div>
Border Opacity
Semi-Opaque
 .border-opacity-50 or .b-o-50 
<div class="border-1 border-opacity-50">Semi-Opaque</div>
Faint Border
 .border-opacity-25 
<div class="border-1 border-opacity-25">Faint Border</div>
Default Border Styles
Gray Border
 .bordered-all 
<div class="border-1 bordered-all">Gray Border</div>
Red Border
 .bordered 
<div class="border-1 bordered b-Red-500">Red Border</div>
Thick Border
 .bordered-thick 
<div class="border-1 bordered-thick">Thick Border</div>
Thin Border
 .bordered-thin 
<div class="border-1 bordered-thin">Thin Border</div>
Rounded Border
 .bordered-round 
<div class="border-1 bordered-round">Rounded Border</div>
Circle
 .bordered-circle 
<div class="border-1 bordered-circle">Circle</div>
Center
 .border-abs-centered 

            <div class="border-1 border-abs-centered"><span>Center</span></div></div><div class="border-1 border-abs-centered"><span>Center</span></div>
Dashed Border
 .bordered-dashed 
<div class="border-1 bordered-dashed">Dashed Border</div>
Dotted Border
 .bordered-dotted 
<div class="border-1 bordered-dotted">Dotted Border</div>
Shadow Border
 .bordered-shadow 
<div class="border-1 bordered-shadow">Shadow Border</div>
Square
 .asp-1 or .aspect-ratio-1 
<div class="border-1 asp-1" style="width: 50px;">Square</div>