Hire UsGet CoreUI PRO all-access →

React Border radius Utilities

Border radius

MarkdownChatGPTClaude

Round the corners of an element with our border-radius utilities, from a subtle radius to a full pill.

ClassStyles
.rounded-size-0--cui-rounded-size: var(--cui-radius-0);
.rounded-size-1--cui-rounded-size: var(--cui-radius-1);
.rounded-size-2--cui-rounded-size: var(--cui-radius-2);
.rounded-size-3--cui-rounded-size: var(--cui-radius-3);
.rounded-size-4--cui-rounded-size: var(--cui-radius-4);
.rounded-size-5--cui-rounded-size: var(--cui-radius-5);
.rounded-size-6--cui-rounded-size: var(--cui-radius-6);
.rounded-size-7--cui-rounded-size: var(--cui-radius-7);
.rounded-size-8--cui-rounded-size: var(--cui-radius-8);
.rounded-size-9--cui-rounded-size: var(--cui-radius-9);
.rounded-size--cui-rounded-size: var(--cui-radius-5);
.rounded-size-circle--cui-rounded-size: 50%;
.rounded-size-pill--cui-rounded-size: var(--cui-radius-pill);
.rounded-0--cui-rounded-size: var(--cui-radius-0);
border-radius: var(--cui-rounded-size);
.rounded-1--cui-rounded-size: var(--cui-radius-1);
border-radius: var(--cui-rounded-size);
.rounded-2--cui-rounded-size: var(--cui-radius-2);
border-radius: var(--cui-rounded-size);
.rounded-3--cui-rounded-size: var(--cui-radius-3);
border-radius: var(--cui-rounded-size);
.rounded-4--cui-rounded-size: var(--cui-radius-4);
border-radius: var(--cui-rounded-size);
.rounded-5--cui-rounded-size: var(--cui-radius-5);
border-radius: var(--cui-rounded-size);
.rounded-6--cui-rounded-size: var(--cui-radius-6);
border-radius: var(--cui-rounded-size);
.rounded-7--cui-rounded-size: var(--cui-radius-7);
border-radius: var(--cui-rounded-size);
.rounded-8--cui-rounded-size: var(--cui-radius-8);
border-radius: var(--cui-rounded-size);
.rounded-9--cui-rounded-size: var(--cui-radius-9);
border-radius: var(--cui-rounded-size);
.rounded--cui-rounded-size: var(--cui-radius-5);
border-radius: var(--cui-rounded-size);
.rounded-circle--cui-rounded-size: 50%;
border-radius: var(--cui-rounded-size);
.rounded-pill--cui-rounded-size: var(--cui-radius-pill);
border-radius: var(--cui-rounded-size);
.rounded-top-0border-start-start-radius: var(--cui-radius-0);
border-start-end-radius: var(--cui-radius-0);
.rounded-top-1border-start-start-radius: var(--cui-radius-1);
border-start-end-radius: var(--cui-radius-1);
.rounded-top-2border-start-start-radius: var(--cui-radius-2);
border-start-end-radius: var(--cui-radius-2);
.rounded-top-3border-start-start-radius: var(--cui-radius-3);
border-start-end-radius: var(--cui-radius-3);
.rounded-top-4border-start-start-radius: var(--cui-radius-4);
border-start-end-radius: var(--cui-radius-4);
.rounded-top-5border-start-start-radius: var(--cui-radius-5);
border-start-end-radius: var(--cui-radius-5);
.rounded-top-6border-start-start-radius: var(--cui-radius-6);
border-start-end-radius: var(--cui-radius-6);
.rounded-top-7border-start-start-radius: var(--cui-radius-7);
border-start-end-radius: var(--cui-radius-7);
.rounded-top-8border-start-start-radius: var(--cui-radius-8);
border-start-end-radius: var(--cui-radius-8);
.rounded-top-9border-start-start-radius: var(--cui-radius-9);
border-start-end-radius: var(--cui-radius-9);
.rounded-topborder-start-start-radius: var(--cui-rounded-size, var(--cui-radius-5));
border-start-end-radius: var(--cui-rounded-size, var(--cui-radius-5));
.rounded-top-circleborder-start-start-radius: 50%;
border-start-end-radius: 50%;
.rounded-top-pillborder-start-start-radius: var(--cui-radius-pill);
border-start-end-radius: var(--cui-radius-pill);
.rounded-end-0border-start-end-radius: var(--cui-radius-0);
border-end-end-radius: var(--cui-radius-0);
.rounded-end-1border-start-end-radius: var(--cui-radius-1);
border-end-end-radius: var(--cui-radius-1);
.rounded-end-2border-start-end-radius: var(--cui-radius-2);
border-end-end-radius: var(--cui-radius-2);
.rounded-end-3border-start-end-radius: var(--cui-radius-3);
border-end-end-radius: var(--cui-radius-3);
.rounded-end-4border-start-end-radius: var(--cui-radius-4);
border-end-end-radius: var(--cui-radius-4);
.rounded-end-5border-start-end-radius: var(--cui-radius-5);
border-end-end-radius: var(--cui-radius-5);
.rounded-end-6border-start-end-radius: var(--cui-radius-6);
border-end-end-radius: var(--cui-radius-6);
.rounded-end-7border-start-end-radius: var(--cui-radius-7);
border-end-end-radius: var(--cui-radius-7);
.rounded-end-8border-start-end-radius: var(--cui-radius-8);
border-end-end-radius: var(--cui-radius-8);
.rounded-end-9border-start-end-radius: var(--cui-radius-9);
border-end-end-radius: var(--cui-radius-9);
.rounded-endborder-start-end-radius: var(--cui-rounded-size, var(--cui-radius-5));
border-end-end-radius: var(--cui-rounded-size, var(--cui-radius-5));
.rounded-end-circleborder-start-end-radius: 50%;
border-end-end-radius: 50%;
.rounded-end-pillborder-start-end-radius: var(--cui-radius-pill);
border-end-end-radius: var(--cui-radius-pill);
.rounded-bottom-0border-end-start-radius: var(--cui-radius-0);
border-end-end-radius: var(--cui-radius-0);
.rounded-bottom-1border-end-start-radius: var(--cui-radius-1);
border-end-end-radius: var(--cui-radius-1);
.rounded-bottom-2border-end-start-radius: var(--cui-radius-2);
border-end-end-radius: var(--cui-radius-2);
.rounded-bottom-3border-end-start-radius: var(--cui-radius-3);
border-end-end-radius: var(--cui-radius-3);
.rounded-bottom-4border-end-start-radius: var(--cui-radius-4);
border-end-end-radius: var(--cui-radius-4);
.rounded-bottom-5border-end-start-radius: var(--cui-radius-5);
border-end-end-radius: var(--cui-radius-5);
.rounded-bottom-6border-end-start-radius: var(--cui-radius-6);
border-end-end-radius: var(--cui-radius-6);
.rounded-bottom-7border-end-start-radius: var(--cui-radius-7);
border-end-end-radius: var(--cui-radius-7);
.rounded-bottom-8border-end-start-radius: var(--cui-radius-8);
border-end-end-radius: var(--cui-radius-8);
.rounded-bottom-9border-end-start-radius: var(--cui-radius-9);
border-end-end-radius: var(--cui-radius-9);
.rounded-bottomborder-end-start-radius: var(--cui-rounded-size, var(--cui-radius-5));
border-end-end-radius: var(--cui-rounded-size, var(--cui-radius-5));
.rounded-bottom-circleborder-end-start-radius: 50%;
border-end-end-radius: 50%;
.rounded-bottom-pillborder-end-start-radius: var(--cui-radius-pill);
border-end-end-radius: var(--cui-radius-pill);
.rounded-start-0border-start-start-radius: var(--cui-radius-0);
border-end-start-radius: var(--cui-radius-0);
.rounded-start-1border-start-start-radius: var(--cui-radius-1);
border-end-start-radius: var(--cui-radius-1);
.rounded-start-2border-start-start-radius: var(--cui-radius-2);
border-end-start-radius: var(--cui-radius-2);
.rounded-start-3border-start-start-radius: var(--cui-radius-3);
border-end-start-radius: var(--cui-radius-3);
.rounded-start-4border-start-start-radius: var(--cui-radius-4);
border-end-start-radius: var(--cui-radius-4);
.rounded-start-5border-start-start-radius: var(--cui-radius-5);
border-end-start-radius: var(--cui-radius-5);
.rounded-start-6border-start-start-radius: var(--cui-radius-6);
border-end-start-radius: var(--cui-radius-6);
.rounded-start-7border-start-start-radius: var(--cui-radius-7);
border-end-start-radius: var(--cui-radius-7);
.rounded-start-8border-start-start-radius: var(--cui-radius-8);
border-end-start-radius: var(--cui-radius-8);
.rounded-start-9border-start-start-radius: var(--cui-radius-9);
border-end-start-radius: var(--cui-radius-9);
.rounded-startborder-start-start-radius: var(--cui-rounded-size, var(--cui-radius-5));
border-end-start-radius: var(--cui-rounded-size, var(--cui-radius-5));
.rounded-start-circleborder-start-start-radius: 50%;
border-end-start-radius: 50%;
.rounded-start-pillborder-start-start-radius: var(--cui-radius-pill);
border-end-start-radius: var(--cui-radius-pill);
On this page

Examples

Add classes to an element to easily round its corners.

Example rounded image Example top rounded image Example right rounded image Example bottom rounded image Example left rounded image
<svg className="docs-placeholder-img rounded" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-top" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example top rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example top rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-end" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example right rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example right rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-bottom" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example bottom rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example bottom rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-start" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example left rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example left rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-top" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example top rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example top rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-end" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example right rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example right rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-bottom" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example bottom rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example bottom rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-start" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example left rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example left rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
Example small rounded image Example default left rounded image Example right completely round image Example left rounded pill image Example extra large bottom rounded image
<svg className="docs-placeholder-img rounded-bottom-1" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example small rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example small rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-start-2" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example default left rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example default left rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-end-circle" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example right completely round image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example right completely round image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-start-pill" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example left rounded pill image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example left rounded pill image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-5 rounded-top-0" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example extra large bottom rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example extra large bottom rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-bottom-1" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example small rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example small rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-start-2" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example default left rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example default left rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-end-circle" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example right completely round image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example right completely round image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-start-pill" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example left rounded pill image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example left rounded pill image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-5 rounded-top-0" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example extra large bottom rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example extra large bottom rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>

Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 9 — the stops of the $radii scale, --cui-radius-0 through --cui-radius-9 — plus circle and pill, and can be configured by modifying the utilities API. .rounded without a number is size 5, the radius buttons and form controls use.

Example non-rounded image Example small rounded image Example default rounded image Example large rounded image Example larger rounded image Example extra large rounded image Example rounded image, size 6 Example rounded image, size 7 Example rounded image, size 8 Example rounded image, size 9 Completely round image Rounded pill image
<svg className="docs-placeholder-img rounded-0" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example non-rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example non-rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-1" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example small rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example small rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-2" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example default rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example default rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-3" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example large rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example large rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-4" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example larger rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example larger rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-5" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example extra large rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example extra large rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-circle" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Completely round image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Completely round image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-pill" width="150" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Rounded pill image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Rounded pill image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-0" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example non-rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example non-rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-1" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example small rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example small rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-2" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example default rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example default rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-3" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example large rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example large rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-4" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example larger rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example larger rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-5" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Example extra large rounded image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Example extra large rounded image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-circle" width="75" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Completely round image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Completely round image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
<svg className="docs-placeholder-img rounded-pill" width="150" height="75" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Rounded pill image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Rounded pill image</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>

Setting the size without applying it

Added in v6.0.0

.rounded-size-* writes the radius into --cui-rounded-size without setting border-radius itself. The unprefixed corner classes — .rounded, .rounded-top, .rounded-end, .rounded-bottom, .rounded-start — read that token, so one size class drives whichever corners you round.

Top
Start
All

Without a .rounded-size-* in scope the corner classes fall back to --cui-radius-5. A numbered .rounded-{n} also writes the token, so .rounded-3 .rounded-top keeps the top corners on size 3 while a side class with its own number (.rounded-top-3) sets that side directly and ignores the token.

Customizing

CSS variables

The radius scale is emitted on :root as --cui-radius-0 through --cui-radius-9, plus --cui-radius-pill. Components read stops of the scale (--cui-radius-5, --cui-radius-7), so overriding a stop re-rounds everything that uses it without recompiling.

scss
$root-token-defaults: map.set($root-token-defaults, --cui-radius, .5rem);
@each $key, $value in $radii {
  $root-token-defaults: map.set($root-token-defaults, --cui-radius-#{$key}, $value);
}
$root-token-defaults: map.set($root-token-defaults, --cui-radius-pill, 50rem);

Sass maps

Each entry is one --cui-radius-{step} token as a multiple of $radius — override the map to add or retune a step:

scss
$radii: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$radii: defaults(
  (
    0: 0,
    1: calc(var(--cui-radius) * .25),
    2: calc(var(--cui-radius) * .375),
    3: calc(var(--cui-radius) * .5),
    4: calc(var(--cui-radius) * .75),
    5: var(--cui-radius),
    6: calc(var(--cui-radius) * 1.25),
    7: calc(var(--cui-radius) * 1.5),
    8: calc(var(--cui-radius) * 1.75),
    9: calc(var(--cui-radius) * 2),
  ),
  $radii
);

Sass mixins

scss
@mixin border-radius($radius: var(--cui-radius-5), $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: var(--cui-radius-5)) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: var(--cui-radius-5)) {
  @if $enable-rounded {
    border-start-end-radius: valid-radius($radius);
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: var(--cui-radius-5)) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: var(--cui-radius-5)) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
    border-end-start-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: var(--cui-radius-5)) {
  @if $enable-rounded {
    border-start-start-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: var(--cui-radius-5)) {
  @if $enable-rounded {
    border-start-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: var(--cui-radius-5)) {
  @if $enable-rounded {
    border-end-end-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: var(--cui-radius-5)) {
  @if $enable-rounded {
    border-end-start-radius: valid-radius($radius);
  }
}

Border radius utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss
"rounded": (
  property: (
    --cui-rounded-size: null,
    border-radius: var(--cui-rounded-size)
  ),
  class: rounded,
  values: map.merge(
    $utilities-radii,
    (
      null: var(--cui-radius-5),
      circle: 50%,
      pill: var(--cui-radius-pill)
    )
  )
),
"rounded-size": (
  property: --cui-rounded-size,
  class: rounded-size,
  values: map.merge(
    $utilities-radii,
    (
      null: var(--cui-radius-5),
      circle: 50%,
      pill: var(--cui-radius-pill)
    )
  )
),
"rounded-top": (
  property: border-start-start-radius border-start-end-radius,
  class: rounded-top,
  values: map.merge(
    $utilities-radii,
    (
      null: var(--cui-rounded-size, var(--cui-radius-5)),
      circle: 50%,
      pill: var(--cui-radius-pill)
    )
  )
),
"rounded-end": (
  property: border-start-end-radius border-end-end-radius,
  class: rounded-end,
  values: map.merge(
    $utilities-radii,
    (
      null: var(--cui-rounded-size, var(--cui-radius-5)),
      circle: 50%,
      pill: var(--cui-radius-pill)
    )
  )
),
"rounded-bottom": (
  property: border-end-start-radius border-end-end-radius,
  class: rounded-bottom,
  values: map.merge(
    $utilities-radii,
    (
      null: var(--cui-rounded-size, var(--cui-radius-5)),
      circle: 50%,
      pill: var(--cui-radius-pill)
    )
  )
),
"rounded-start": (
  property: border-start-start-radius border-end-start-radius,
  class: rounded-start,
  values: map.merge(
    $utilities-radii,
    (
      null: var(--cui-rounded-size, var(--cui-radius-5)),
      circle: 50%,
      pill: var(--cui-radius-pill)
    )
  )
),