Radius

Utilities for border radius.

Quick reference

Class	Styles
af-radius	border-radius: var(--af-radius)
af-radius-sm	border-radius: var(--af-radius-sm)
af-radius-md	border-radius: var(--af-radius-md)
af-radius-lg	border-radius: var(--af-radius-lg)
af-radius-full	border-radius: var(--af-pill-radius)

Examples

Radius

af-radius

af-radius-sm

af-radius-lg

<div class="af-bg-primary-soft af-radius af-p-sm">af-radius</div>
<div class="af-bg-primary-soft af-radius-sm af-p-sm">af-radius-sm</div>
<div class="af-bg-primary-soft af-radius-lg af-p-sm">af-radius-lg</div>

Available classes

• af-radius
• af-radius-sm
• af-radius-md
• af-radius-lg
• af-radius-full

Responsive variants

All radius utilities support responsive variants using the @{bp} suffix. See Responsive Suffix for syntax and breakpoints.

Related

• Shadow