Borders

Border Radius

Utilities for sets border radius.

Class

class	css
rounded-none	border-radius: 0
rounded-sm	border-radius: 0.125rem
rounded	border-radius: 0.25rem
rounded-md	border-radius: 0.375rem
rounded-lg	border-radius: 0.5rem
rounded-full	border-radius: 9999px
rounded-t-none	border-top-left-radius: 0; border-top-right-radius: 0
rounded-r-none	border-top-right-radius: 0; border-bottom-right-radius: 0
rounded-b-none	border-bottom-right-radius: 0; border-bottom-left-radius: 0
rounded-l-none	border-top-left-radius: 0; border-bottom-left-radius: 0
rounded-t-sm	border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem
rounded-r-sm	border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem
rounded-b-sm	border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem
rounded-l-sm	border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem
rounded-t	border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem
rounded-r	border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem
rounded-b	border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem
rounded-l	border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem
rounded-t-md	border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem
rounded-r-md	border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem
rounded-b-md	border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem
rounded-l-md	border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem
rounded-t-lg	border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem
rounded-r-lg	border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem
rounded-b-lg	border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem
rounded-l-lg	border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem
rounded-t-full	border-top-left-radius: 9999px; border-top-right-radius: 9999px
rounded-r-full	border-top-right-radius: 9999px; border-bottom-right-radius: 9999px
rounded-b-full	border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px
rounded-l-full	border-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

Variant	Enabled	Responsive
Default	Yes
Dark Theme
hover
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled