radius

Preset radius values and their consumers.

Scope

These values come from the current preset. Project theme declarations can override them. Mode-specific entries are labeled separately.

Corner radii shape an element’s border. They do not, by themselves, clip its descendants.

Values

xs

--radius-xs

Default.125rem

sm

--radius-sm

Default.25rem

md

--radius-md

Default.375rem

lg

--radius-lg

Default.5rem

xl

--radius-xl

Default.75rem

2xl

--radius-2xl

Default1rem

3xl

--radius-3xl

Default1.5rem

4xl

--radius-4xl

Default2rem

Consumers

border-bottom-left-radius-, border-bottom-right-radius-, border-end-end-radius-, border-end-start-radius-, border-radius-, border-start-end-radius-, border-start-start-radius-, border-top-left-radius-, border-top-right-radius-, r-, rbl-, rbr-, rtl-, rtr-

Customize

See variables and modes and theme directives. For usage and examples, see Corner radius.