New

Stable version of Uniform CSS now officially released! Release note

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