component

Border Radius

Utilities for controlling the border radius of an element. Breakpoints modifiers

Class Properties px
is-rounded-none border-radius: 0; -
is-rounded-xs border-radius: 0.125rem; 2px
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:

is-rounded-none
is-rounded-sm
is-rounded-sm
is-rounded-md
is-rounded-lg
is-rounded-xl
is-rounded-xxl
is-rounded-full

Variables

  :root {
    --radius-none: 0;
    --radius-xs  : .125rem;  // 2px
    --radius-sm  : .25rem;   // 4px
    --radius-md  : .375rem;  // 6px
    --radius-lg  : .5rem;    // 8px
    --radius-xl  : .75rem;   // 12px
    --radius-xxl : 1rem;     // 16px
    --radius-full: 9999px;
  }