Borders

Widths

Format:

.border-{size}
.border-{side}-{size}

CSS: border-width, border-top-width, border-right-width, border-bottom-width, border-left-width

Defaults:

widths: [0, 1, 2]

Styles

Format:

.border-{style}
.border-{side}-{style}

CSS: border-style, border-top-style, border-right-style, border-bottom-style, border-left-style

Defaults:

styles: ["solid", "dashed", "dotted"]

Colors

Format:

.border-{color}
.border-{color}-{shade}
.border-{side}-{color}
.border-{side}-{color}-{shade}

# Transparency
.border-{color}/{opacity}
.border-{color}-{shade}/{opacity}
.border-{side}-{color}/{opacity}
.border-{side}-{color}-{shade}/{opacity}

CSS: border-color, border-top-color, border-right-color, border-bottom-color, border-left-color

Defaults: see Colors

Radius

Format: .radius-{size}

CSS: border-radius

Defaults:

radius: [0.125, 0.25, 0.5]

Examples

<div class="border-1 border-solid border-grey-200">
    <!-- ...snip... -->
</div>

<div class="border-t-1 border-t-solid border-t-grey-200">
    <!-- ...snip... -->
</div>