Included in:
Not included in any file!
Depends from:
BuilderMixins.build-classes($radius-prefix, border-radius, $radius-sizes)
BuilderMixins.build-responsive-classes($radius-prefix, border-radius, $radius-sizes)
Local variables:
$radius-prefix: 'is-rounded'
--radius-none: 0
--radius-xs: .125rem
--radius-sm: .1875rem
--radius-md: .25rem
--radius-lg: .3125rem
--radius-xl: .375rem
--radius-xxl: 75rem
--radius-full: 9999px
$radius-sizes: (
'none': var(--radius-none),
'xs' : var(--radius-xs),
'sm' : var(--radius-sm),
'md' : var(--radius-md),
'lg' : var(--radius-lg),
'xl' : var(--radius-xl),
'xxl' : var(--radius-xxl),
'full': var(--radius-full),
)
component
Border Radius
Utilities for controlling the border radius of an element. Breakpoints modifiers
| Class | Properties | px |
|---|---|---|
is-rounded-none |
border-radius: 0; | - |
is-rounded-xs |
border-radius: 0.125rem; | 2px |
is-rounded-sm |
border-radius: 0.25rem; | 4px |
is-rounded-md |
border-radius: 0.375rem; | 6px |
is-rounded-lg |
border-radius: 0.5rem; | 8px |
is-rounded-xl |
border-radius: 0.75rem; | 12px |
is-rounded-xxl |
border-radius: 1rem; | 16px |
is-rounded-full |
border-radius: 9999px | - |
Basic usage:
is-rounded-none
is-rounded-sm
is-rounded-sm
is-rounded-md
is-rounded-lg
is-rounded-xl
is-rounded-xxl
is-rounded-full
Variables
:root {
--radius-none: 0;
--radius-xs : .125rem; // 2px
--radius-sm : .25rem; // 4px
--radius-md : .375rem; // 6px
--radius-lg : .5rem; // 8px
--radius-xl : .75rem; // 12px
--radius-xxl : 1rem; // 16px
--radius-full: 9999px;
}