Skip to content

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

ClassDescription
radiusborder-radius: var(--sf-radius) 0.5em
radius:iborder-radius: inherit
radius:0border-radius: 0
radius:v1border-radius: var(--sf-radius-v1) 1em
radius:v2border-radius: var(--sf-radius-v2) 1.25em
radius:v3border-radius: var(--sf-radius-v3) 1.5em
radius:v4border-radius: var(--sf-radius-v4) 2em
radius:v5border-radius: var(--sf-radius-v5) 2.5em
radius:v6border-radius: var(--sf-radius-v6) 3em
radius:50border-radius: 50%
radius:75border-radius: 75%
radius:100border-radius: 100%
html
<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

Released under the MIT License