Border

Additive

UtilityExample
border
100x100
border-top
100x100
border-right
100x100
border-bottom
100x100
border-left
100x100

Snippet

Subtractive

UtilityExample
border-0
100x100
border-top-0
100x100
border-right-0
100x100
border-bottom-0
100x100
border-left-0
100x100

Snippet

Border Color

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

Snippet

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).

Snippet

Outputs:

Snippet

Rounded

These are border-radius utility classes.

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

Snippet

Rounded Sizes

UtilityExample
rounded-sm
100x100
rounded-lg
100x100

Snippet

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 9, 2025 at 6:15:38 AM