Radius

The border radius utility classes help manage the roundness of the corners of an element. These classes allow you to control the border-radius property easily.

CSS Classes

Class	Description
radius	border-radius: var(--sf-radius) 0.5em
radius:i	border-radius: inherit
radius:0	border-radius: 0
radius:v1	border-radius: var(--sf-radius-v1) 1em
radius:v2	border-radius: var(--sf-radius-v2) 1.25em
radius:v3	border-radius: var(--sf-radius-v3) 1.5em
radius:v4	border-radius: var(--sf-radius-v4) 2em
radius:v5	border-radius: var(--sf-radius-v5) 2.5em
radius:v6	border-radius: var(--sf-radius-v6) 3em
radius:50	border-radius: 50%
radius:75	border-radius: 75%
radius:100	border-radius: 100%

<div class="radius">
  Content that radius...
</div>

Radius:0

Radius

Radius:v1

Radius:v2

Radius:v3

Radius:v4

Radius:v5

Radius:v6

Radius:50

Radius:75

Radius:100