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>