Border

Additive
Subtractive
Border Color
- Sass API
Rounded
Rounded Sizes

Additive

Utility	Example
border	100x100
border-top	100x100
border-right	100x100
border-bottom	100x100
border-left	100x100

Code Sample (expand to see it)

<div class="border"></div>
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>

Subtractive

Utility	Example
border-0	100x100
border-top-0	100x100
border-right-0	100x100
border-bottom-0	100x100
border-left-0	100x100

Code Sample (expand to see it)

<div class="border-0"></div>
<div class="border-top-0"></div>
<div class="border-right-0"></div>
<div class="border-bottom-0"></div>
<div class="border-left-0"></div>

Border Color

Utility	Example
border-primary	100x100
border-secondary	100x100
border-success	100x100
border-info	100x100
border-warning	100x100
border-danger	100x100
border-dark	100x100
border-light	100x100

Code Sample (expand to see it)

<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-success"></div>
<div class="border border-info"></div>
<div class="border border-warning"></div>
<div class="border border-danger"></div>
<div class="border border-dark"></div>
<div class="border border-light"></div>

Border Color Sass API

The map $border-theme-colors allows generating any number of border variants. If a key starts with ., # or %, Clay will output it as is, otherwise we will prepend .border- to the key (e.g., .border-primary).

$border-theme-colors: (
    'primary': (
        border-color: $primary !important,
    ),
    '%b-tertiary': (
        border-color: green !important,
    ),
    '.b-tertiary': (
        extend: '%border-tertiary',
    ),
    '.b-quaternary': (
        extend: '%border-tertiary',
    ),
);

Outputs:

.border-primary {
    border-color: #0b5fff !important;
}

.b-tertiary, .b-quaternary {
    border-color: green !important;
}

Rounded

These are border-radius utility classes.

Utility	Example
rounded	100x100
rounded-top	100x100
rounded-right	100x100
rounded-bottom	100x100
rounded-left	100x100
rounded-circle	100x100
rounded-pill	150x100
rounded-0	100x100

Code Sample (expand to see it)

<div class="rounded"></div>
<div class="rounded-top"></div>
<div class="rounded-right"></div>
<div class="rounded-bottom"></div>
<div class="rounded-left"></div>
<div class="rounded-circle"></div>
<div class="rounded-pill"></div>
<div class="rounded-0"></div>

Rounded Sizes

Utility	Example
rounded-sm	100x100
rounded-lg	100x100

Code Sample (expand to see it)

<div class="rounded-sm"></div>
<div class="rounded-lg"></div>