Borders

Border Radius

Utilities for sets border radius.


Class

classcss
rounded-noneborder-radius: 0
rounded-smborder-radius: 0.125rem
roundedborder-radius: 0.25rem
rounded-mdborder-radius: 0.375rem
rounded-lgborder-radius: 0.5rem
rounded-fullborder-radius: 9999px
rounded-t-noneborder-top-left-radius: 0;
border-top-right-radius: 0
rounded-r-noneborder-top-right-radius: 0;
border-bottom-right-radius: 0
rounded-b-noneborder-bottom-right-radius: 0;
border-bottom-left-radius: 0
rounded-l-noneborder-top-left-radius: 0;
border-bottom-left-radius: 0
rounded-t-smborder-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem
rounded-r-smborder-top-right-radius: 0.125rem;
border-bottom-right-radius: 0.125rem
rounded-b-smborder-bottom-right-radius: 0.125rem;
border-bottom-left-radius: 0.125rem
rounded-l-smborder-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem
rounded-tborder-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem
rounded-rborder-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem
rounded-bborder-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem
rounded-lborder-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem
rounded-t-mdborder-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem
rounded-r-mdborder-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem
rounded-b-mdborder-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem
rounded-l-mdborder-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem
rounded-t-lgborder-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem
rounded-r-lgborder-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem
rounded-b-lgborder-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem
rounded-l-lgborder-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem
rounded-t-fullborder-top-left-radius: 9999px;
border-top-right-radius: 9999px
rounded-r-fullborder-top-right-radius: 9999px;
border-bottom-right-radius: 9999px
rounded-b-fullborder-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px
rounded-l-fullborder-top-left-radius: 9999px;
border-bottom-left-radius: 9999px

Usage

<!-- Example -->
<y class="rounded-lg">
...
</y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'rounded',
//variant: 'responsive',
property: 'border-radius',
modifier: (
'xl': '...rem',
'2xl': '...rem'
...
)
)
)

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled