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;
}