Border Utilities
Border style, width, side, radius and colour utilities.
Border Styles
Different border line styles.
Style Variations
Solid border
Dashed border
Dotted border
Double border
No border
HTML
<div class="ss-c-border--solid ss-c-p--04 ss-c-mb--02">Solid border</div>
<div class="ss-c-border--dashed ss-c-p--04 ss-c-mb--02">Dashed border</div>
<div class="ss-c-border--dotted ss-c-p--04 ss-c-mb--02">Dotted border</div>
<div class="ss-c-border--double ss-c-p--04 ss-c-mb--02">Double border</div>
<div class="ss-c-border--none ss-c-p--04 ss-c-mb--02 ss-c-bg--fill_02">No border</div>Border Widths
Control border thickness with width utilities.
Width Variations
Border width 1px
Border width 2px
Border width 3px
Border width 4px
HTML
<div class="ss-c-border--solid ss-c-border--w--01 ss-c-p--04 ss-c-mb--02">
Border width 1px
</div>
<div class="ss-c-border--solid ss-c-border--w--02 ss-c-p--04 ss-c-mb--02">
Border width 2px
</div>
<div class="ss-c-border--solid ss-c-border--w--03 ss-c-p--04 ss-c-mb--02">
Border width 3px
</div>
<div class="ss-c-border--solid ss-c-border--w--04 ss-c-p--04 ss-c-mb--02">
Border width 4px
</div>Border Sides
Apply borders to specific sides of an element.
Individual Sides
Border top only
Border right only
Border bottom only
Border left only
HTML
<div class="ss-c-border--top ss-c-p--04 ss-c-mb--02">Border top only</div>
<div class="ss-c-border--right ss-c-p--04 ss-c-mb--02">Border right only</div>
<div class="ss-c-border--bottom ss-c-p--04 ss-c-mb--02">Border bottom only</div>
<div class="ss-c-border--left ss-c-p--04 ss-c-mb--02">Border left only</div>Axis Borders
Border left and right (x-axis)
Border top and bottom (y-axis)
HTML
<div class="ss-c-border--x ss-c-p--04 ss-c-mb--02">
Border left and right (x-axis)
</div>
<div class="ss-c-border--y ss-c-p--04 ss-c-mb--02">
Border top and bottom (y-axis)
</div>Border Radius
Round the corners of elements.
Radius Sizes
No radius (sharp)
Small radius
Medium radius
Large radius
Full radius (pill)
HTML
<div class="ss-c-border--solid ss-c-rounded--00 ss-c-p--04 ss-c-mb--02 ss-c-d--inline-block">
No radius (sharp)
</div>
<div class="ss-c-border--solid ss-c-rounded--01 ss-c-p--04 ss-c-mb--02 ss-c-d--inline-block">
Small radius
</div>
<div class="ss-c-border--solid ss-c-rounded--02 ss-c-p--04 ss-c-mb--02 ss-c-d--inline-block">
Medium radius
</div>
<div class="ss-c-border--solid ss-c-rounded--03 ss-c-p--04 ss-c-mb--02 ss-c-d--inline-block">
Large radius
</div>
<div class="ss-c-border--solid ss-c-rounded--full ss-c-p--04 ss-c-mb--02 ss-c-d--inline-block">
Full radius (pill)
</div>Corner-Specific Radius
Rounded top corners
Rounded bottom corners
Rounded left corners
Rounded right corners
HTML
<div class="ss-c-border--solid ss-c-rounded--top ss-c-p--04 ss-c-mb--02">
Rounded top corners
</div>
<div class="ss-c-border--solid ss-c-rounded--bottom ss-c-p--04 ss-c-mb--02">
Rounded bottom corners
</div>
<div class="ss-c-border--solid ss-c-rounded--left ss-c-p--04 ss-c-mb--02">
Rounded left corners
</div>
<div class="ss-c-border--solid ss-c-rounded--right ss-c-p--04 ss-c-mb--02">
Rounded right corners
</div>Circle
Circle
HTML
<div
class="ss-c-border--solid ss-c-rounded--circle ss-c-w--64 ss-c-h--64 ss-c-d--flex ss-c-align-items--center ss-c-justify-content--center"
>
Circle
</div>Border Colors
Apply semantic and custom colors to borders.
Semantic Colors
Primary border color
Secondary border color
Success border color
Warning border color
Danger border color
HTML
<div class="ss-c-border--solid ss-c-border--primary ss-c-p--04 ss-c-mb--02">
Primary border color
</div>
<div class="ss-c-border--solid ss-c-border--secondary ss-c-p--04 ss-c-mb--02">
Secondary border color
</div>
<div class="ss-c-border--solid ss-c-border--success ss-c-p--04 ss-c-mb--02">
Success border color
</div>
<div class="ss-c-border--solid ss-c-border--warning ss-c-p--04 ss-c-mb--02">
Warning border color
</div>
<div class="ss-c-border--solid ss-c-border--danger ss-c-p--04 ss-c-mb--02">
Danger border color
</div>