Cirrus

#Border Radius

New
0.7.0

These are utility classes that specify the border radius of elements.

ClassStyles
u-round-none
border-radius: 0px !important
u-round-xs
border-radius: .25rem !important
u-round-sm
border-radius: .5rem !important
u-round-md
border-radius: .75rem !important
u-round-lg
border-radius: 1rem !important
u-round-xl
border-radius: 1.25rem !important
u-round-full
border-radius: 9001px !important
Supported Pseudo-Variants
New
0.8.0
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited

See more pseudo-variants.

#Examples

Below is a demo of all utility classes that apply a border radius of some sort. The syntax follows the form of u-round-[xs|sm|md|lg|xl|full].

u-round-xs

u-round-sm

u-round-md

u-round-lg

u-round-xl

u-round-full

<div class="md:col-4 u-text-center">
    <div class="p-4 bg-purple-500 u-shadow-lg u-round-xs"></div>
    <p><b>u-round-xs</b></p>
</div>
<div class="md:col-4 u-text-center">
    <div class="p-4 bg-purple-500 u-shadow-lg u-round-sm"></div>
    <p><b>u-round-sm</b></p>
</div>
<div class="md:col-4 u-text-center">
    <div class="p-4 bg-purple-500 u-shadow-lg u-round-md"></div>
    <p><b>u-round-md</b></p>
</div>
<div class="md:col-4 u-text-center">
    <div class="p-4 bg-purple-500 u-shadow-lg u-round-lg"></div>
    <p><b>u-round-lg</b></p>
</div>
<div class="md:col-4 u-text-center">
    <div class="p-4 bg-purple-500 u-shadow-lg u-round-xl"></div>
    <p><b>u-round-xl</b></p>
</div>
<div class="md:col-4 u-text-center">
    <div class="p-4 bg-purple-500 u-shadow-lg u-round-full"></div>
    <p><b>u-round-full</b></p>
</div>

#No Border Radius

To remove all border-radii, use the u-round-none class.

u-round-none

<div class="bg-indigo-500 u-round-none p-4 u-shadow-lg"></div>
<p class="mb-0"><b>u-round-none</b></p>

#Variants

The classes specified above are the default utility classes for setting the border-radius property. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        round: (
            '2xl': 1.5rem,
            '3xl': 1.75rem
        )
    )
) !default;

This would generate the following classes.

.u-round-2xl {
    border-radius: 1.5rem !important;
}
.u-round-3xl {
    border-radius: 1.75rem !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.