Border Radiuses

Visual reference of all default radiuses.


Visual Reference

The following table visually represents all the radiuses that are available.

Reference Class Pixels Rem
radius-none 0px 0rem
radius-2xs 3px 0.1875rem
radius-xs 4px 0.25rem
radius-sm 6px 0.375rem
radius-md 8px 0.5rem
radius-lg 12px 0.75rem
radius-xl 16px 1rem
radius-2xl 24px 1.5rem
radius-full 9999px 9999px

Basic Usage

Apply border radiuses with the radius-<size> utility.

<div class="radius-lg ...">
...
</div>

CSS Variables

Customize radiuses by overriding the following CSS custom properties.

:root {
--radius-2xs: 0.1875rem;
--radius-xs: 0.25rem;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
}