### Border Styles

Different border line styles.

#### Style Variations

Solid border
Dashed border
Dotted border
Double border
No border
HTML

    <div class="border--solid p--04 mb--02">Solid border</div>
            <div class="border--dashed p--04 mb--02">Dashed border</div>
            <div class="border--dotted p--04 mb--02">Dotted border</div>
            <div class="border--double p--04 mb--02">Double border</div>
            <div class="border--none p--04 mb--02 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="border--solid border--w--01 p--04 mb--02">
                Border width 1px
            </div>
            <div class="border--solid border--w--02 p--04 mb--02">
                Border width 2px
            </div>
            <div class="border--solid border--w--03 p--04 mb--02">
                Border width 3px
            </div>
            <div class="border--solid border--w--04 p--04 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="border--top p--04 mb--02">Border top only</div>
            <div class="border--right p--04 mb--02">Border right only</div>
            <div class="border--bottom p--04 mb--02">Border bottom only</div>
            <div class="border--left p--04 mb--02">Border left only</div>

#### Axis Borders

Border left and right (x-axis)
Border top and bottom (y-axis)
HTML

    <div class="border--x p--04 mb--02">
                Border left and right (x-axis)
            </div>
            <div class="border--y p--04 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="border--solid rounded--00 p--04 mb--02 d--inline-block">
                No radius (sharp)
            </div>
            <div class="border--solid rounded--01 p--04 mb--02 d--inline-block">
                Small radius
            </div>
            <div class="border--solid rounded--02 p--04 mb--02 d--inline-block">
                Medium radius
            </div>
            <div class="border--solid rounded--03 p--04 mb--02 d--inline-block">
                Large radius
            </div>
            <div class="border--solid rounded--full p--04 mb--02 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="border--solid rounded--top p--04 mb--02">
                Rounded top corners
            </div>
            <div class="border--solid rounded--bottom p--04 mb--02">
                Rounded bottom corners
            </div>
            <div class="border--solid rounded--left p--04 mb--02">
                Rounded left corners
            </div>
            <div class="border--solid rounded--right p--04 mb--02">
                Rounded right corners
            </div>

#### Circle

Circle
HTML

    <div
                class="border--solid rounded--circle w--64 h--64 d--flex align-items--center 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="border--solid border--primary p--04 mb--02">
                Primary border color
            </div>
            <div class="border--solid border--secondary p--04 mb--02">
                Secondary border color
            </div>
            <div class="border--solid border--success p--04 mb--02">
                Success border color
            </div>
            <div class="border--solid border--warning p--04 mb--02">
                Warning border color
            </div>
            <div class="border--solid border--danger p--04 mb--02">
                Danger border color
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!