component

Border Radius

Utilities for controlling the border radius of an element.

Class	Properties	px
`is-rounded-none`	`border-radius: 0`	`-`
`is-rounded-xxs`	`border-radius: 0.125rem`	`2px`
`is-rounded-xs`	`border-radius: 0.1875rem`	`3px`
`is-rounded-sm`	`border-radius: 0.25rem`	`4px`
`is-rounded-md`	`border-radius: 0.375rem`	`6px`
`is-rounded-lg`	`border-radius: 0.5rem`	`8px`
`is-rounded-xl`	`border-radius: 0.75rem`	`12px`
`is-rounded-xxl`	`border-radius: 1rem`	`16px`
`is-rounded-full`	`border-radius: 9999px`	`-`

Basic usage:

<div class="is-flex gap-md">
  <div class="has-background-contrast-10 padding-xs is-rounded-none">is-rounded</div>
  <div class="has-background-contrast-10 padding-xs is-rounded-xxs">is-rounded-xs</div>
  <div class="has-background-contrast-10 padding-xs is-rounded-xs">is-rounded-xxs</div>
  <div class="has-background-contrast-10 padding-xs is-rounded-sm">is-rounded-sm</div>
  <div class="has-background-contrast-10 padding-xs is-rounded-md">is-rounded-md</div>
  <div class="has-background-contrast-10 padding-xs is-rounded-lg">is-rounded-lg</div>
  <div class="has-background-contrast-10 padding-xs is-rounded-xl">is-rounded-xl</div>
  <div class="has-background-contrast-10 padding-xs is-rounded-xxl">is-rounded-xxl</div>
  <div class="has-background-contrast-10 padding-xs is-rounded-full">is-rounded-full</div>
</div>

is-rounded

is-rounded-xs

is-rounded-xxs

is-rounded-sm

is-rounded-md

is-rounded-lg

is-rounded-xl

is-rounded-xxl

is-rounded-full

Customizable Properties

  --radius-none:  0;
  --radius-xxs:   .125rem;
  --radius-xs:    .1875rem;
  --radius-sm:    .25rem;
  --radius-md:    .375rem;
  --radius-lg:    .50rem;
  --radius-xl:    .75rem;
  --radius-xxl:   1rem;
  --radius-full:  9999px;