Radius

Utilities for border radius.

Quick reference

Class	Styles
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: 9999px

Examples

Radius

af-radius-sm

af-radius-lg

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