#Border Radius
These are utility classes that specify the border radius of elements.
| Class | Styles |
|---|---|
u-round-none | |
u-round-xs | |
u-round-sm | |
u-round-md | |
u-round-lg | |
u-round-xl | |
u-round-full | |
#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="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="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="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="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="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="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.