Additive
Utility Example border 100x100
border-top 100x100
border-right 100x100
border-bottom 100x100
border-left 100x100
<div className ="border" ></div >
<div className ="border-top" ></div >
<div className ="border-right" ></div >
<div className ="border-bottom" ></div >
<div className ="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
<div className ="border-0" ></div >
<div className ="border-top-0" ></div >
<div className ="border-right-0" ></div >
<div className ="border-bottom-0" ></div >
<div className ="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
<div className ="border border-primary" ></div >
<div className ="border border-secondary" ></div >
<div className ="border border-success" ></div >
<div className ="border border-info" ></div >
<div className ="border border-warning" ></div >
<div className ="border border-danger" ></div >
<div className ="border border-dark" ></div >
<div className ="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' ,
),
);Show code
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
<div className ="rounded" ></div >
<div className ="rounded-top" ></div >
<div className ="rounded-right" ></div >
<div className ="rounded-bottom" ></div >
<div className ="rounded-left" ></div >
<div className ="rounded-circle" ></div >
<div className ="rounded-pill" ></div >
<div className ="rounded-0" ></div >
Rounded Sizes
Utility Example rounded-sm 100x100
rounded-lg 100x100
<div className ="rounded-sm" ></div >
<div className ="rounded-lg" ></div > Edit this page on GitHub Contributors
Matuzalém Teles
Last edited May 9, 2025 at 6:15:38 AM