Border Radius

Utilities for controlling the border radius of an element.

Class Name	CSS Equivalent
corner-none	border-radius: var(--cds-sys-shape-none); /* 0px*/
corner-top-none	border-top-left-radius: var(--cds-sys-shape-none); /* 0px*/
corner-bottom-none	border-bottom-left-radius: var(--cds-sys-shape-none); /* 0px*/
corner-left-none	border-top-left-radius: var(--cds-sys-shape-none); /* 0px*/
corner-right-none	border-top-right-radius: var(--cds-sys-shape-none); /* 0px*/
corner-top-left-none	border-top-left-radius: var(--cds-sys-shape-none); /* 0px*/
corner-top-right-none	border-top-right-radius: var(--cds-sys-shape-none); /* 0px*/
corner-bottom-right-none	border-bottom-right-radius: var(--cds-sys-shape-none); /* 0px*/
corner-bottom-left-none	border-bottom-left-radius: var(--cds-sys-shape-none); /* 0px*/
corner-3xs	border-radius: var(--cds-sys-shape-3xs); /* 1px*/
corner-top-3xs	border-top-left-radius: var(--cds-sys-shape-3xs); /* 1px*/
corner-bottom-3xs	border-bottom-left-radius: var(--cds-sys-shape-3xs); /* 1px*/
corner-left-3xs	border-top-left-radius: var(--cds-sys-shape-3xs); /* 1px*/
corner-right-3xs	border-top-right-radius: var(--cds-sys-shape-3xs); /* 1px*/
corner-top-left-3xs	border-top-left-radius: var(--cds-sys-shape-3xs); /* 1px*/
corner-top-right-3xs	border-top-right-radius: var(--cds-sys-shape-3xs); /* 1px*/
corner-bottom-right-3xs	border-bottom-right-radius: var(--cds-sys-shape-3xs); /* 1px*/
corner-bottom-left-3xs	border-bottom-left-radius: var(--cds-sys-shape-3xs); /* 1px*/
corner-2xs	border-radius: var(--cds-sys-shape-2xs); /* 2px*/
corner-top-2xs	border-top-left-radius: var(--cds-sys-shape-2xs); /* 2px*/
corner-bottom-2xs	border-bottom-left-radius: var(--cds-sys-shape-2xs); /* 2px*/
corner-left-2xs	border-top-left-radius: var(--cds-sys-shape-2xs); /* 2px*/
corner-right-2xs	border-top-right-radius: var(--cds-sys-shape-2xs); /* 2px*/
corner-top-left-2xs	border-top-left-radius: var(--cds-sys-shape-2xs); /* 2px*/
corner-top-right-2xs	border-top-right-radius: var(--cds-sys-shape-2xs); /* 2px*/
corner-bottom-right-2xs	border-bottom-right-radius: var(--cds-sys-shape-2xs); /* 2px*/
corner-bottom-left-2xs	border-bottom-left-radius: var(--cds-sys-shape-2xs); /* 2px*/
corner-xs	border-radius: var(--cds-sys-shape-xs); /* 4px*/
corner-top-xs	border-top-left-radius: var(--cds-sys-shape-xs); /* 4px*/
corner-bottom-xs	border-bottom-left-radius: var(--cds-sys-shape-xs); /* 4px*/
corner-left-xs	border-top-left-radius: var(--cds-sys-shape-xs); /* 4px*/
corner-right-xs	border-top-right-radius: var(--cds-sys-shape-xs); /* 4px*/
corner-top-left-xs	border-top-left-radius: var(--cds-sys-shape-xs); /* 4px*/
corner-top-right-xs	border-top-right-radius: var(--cds-sys-shape-xs); /* 4px*/
corner-bottom-right-xs	border-bottom-right-radius: var(--cds-sys-shape-xs); /* 4px*/
corner-bottom-left-xs	border-bottom-left-radius: var(--cds-sys-shape-xs); /* 4px*/
corner-s	border-radius: var(--cds-sys-shape-s); /* 8px*/
corner-top-s	border-top-left-radius: var(--cds-sys-shape-s); /* 8px*/
corner-bottom-s	border-bottom-left-radius: var(--cds-sys-shape-s); /* 8px*/
corner-left-s	border-top-left-radius: var(--cds-sys-shape-s); /* 8px*/
corner-right-s	border-top-right-radius: var(--cds-sys-shape-s); /* 8px*/
corner-top-left-s	border-top-left-radius: var(--cds-sys-shape-s); /* 8px*/
corner-top-right-s	border-top-right-radius: var(--cds-sys-shape-s); /* 8px*/
corner-bottom-right-s	border-bottom-right-radius: var(--cds-sys-shape-s); /* 8px*/
corner-bottom-left-s	border-bottom-left-radius: var(--cds-sys-shape-s); /* 8px*/
corner-m	border-radius: var(--cds-sys-shape-m); /* 12px*/
corner-top-m	border-top-left-radius: var(--cds-sys-shape-m); /* 12px*/
corner-bottom-m	border-bottom-left-radius: var(--cds-sys-shape-m); /* 12px*/
corner-left-m	border-top-left-radius: var(--cds-sys-shape-m); /* 12px*/
corner-right-m	border-top-right-radius: var(--cds-sys-shape-m); /* 12px*/
corner-top-left-m	border-top-left-radius: var(--cds-sys-shape-m); /* 12px*/
corner-top-right-m	border-top-right-radius: var(--cds-sys-shape-m); /* 12px*/
corner-bottom-right-m	border-bottom-right-radius: var(--cds-sys-shape-m); /* 12px*/
corner-bottom-left-m	border-bottom-left-radius: var(--cds-sys-shape-m); /* 12px*/
corner-l	border-radius: var(--cds-sys-shape-l); /* 16px*/
corner-top-l	border-top-left-radius: var(--cds-sys-shape-l); /* 16px*/
corner-bottom-l	border-bottom-left-radius: var(--cds-sys-shape-l); /* 16px*/
corner-left-l	border-top-left-radius: var(--cds-sys-shape-l); /* 16px*/
corner-right-l	border-top-right-radius: var(--cds-sys-shape-l); /* 16px*/
corner-top-left-l	border-top-left-radius: var(--cds-sys-shape-l); /* 16px*/
corner-top-right-l	border-top-right-radius: var(--cds-sys-shape-l); /* 16px*/
corner-bottom-right-l	border-bottom-right-radius: var(--cds-sys-shape-l); /* 16px*/
corner-bottom-left-l	border-bottom-left-radius: var(--cds-sys-shape-l); /* 16px*/
corner-xl	border-radius: var(--cds-sys-shape-xl); /* 28px*/
corner-top-xl	border-top-left-radius: var(--cds-sys-shape-xl); /* 28px*/
corner-bottom-xl	border-bottom-left-radius: var(--cds-sys-shape-xl); /* 28px*/
corner-left-xl	border-top-left-radius: var(--cds-sys-shape-xl); /* 28px*/
corner-right-xl	border-top-right-radius: var(--cds-sys-shape-xl); /* 28px*/
corner-top-left-xl	border-top-left-radius: var(--cds-sys-shape-xl); /* 28px*/
corner-top-right-xl	border-top-right-radius: var(--cds-sys-shape-xl); /* 28px*/
corner-bottom-right-xl	border-bottom-right-radius: var(--cds-sys-shape-xl); /* 28px*/
corner-bottom-left-xl	border-bottom-left-radius: var(--cds-sys-shape-xl); /* 28px*/
corner-full	border-radius: var(--cds-sys-shape-full); /* 9999px*/
corner-top-full	border-top-left-radius: var(--cds-sys-shape-full); /* 9999px*/
corner-bottom-full	border-bottom-left-radius: var(--cds-sys-shape-full); /* 9999px*/
corner-left-full	border-top-left-radius: var(--cds-sys-shape-full); /* 9999px*/
corner-right-full	border-top-right-radius: var(--cds-sys-shape-full); /* 9999px*/
corner-top-left-full	border-top-left-radius: var(--cds-sys-shape-full); /* 9999px*/
corner-top-right-full	border-top-right-radius: var(--cds-sys-shape-full); /* 9999px*/
corner-bottom-right-full	border-bottom-right-radius: var(--cds-sys-shape-full); /* 9999px*/
corner-bottom-left-full	border-bottom-left-radius: var(--cds-sys-shape-full); /* 9999px*/

Rounded corners

Use utilities like corner-xl, corner-full, or corner-xs to apply different border radius sizes to an element.

corner-m

corner-xs

corner-xl

corner-full

<div class="[...] corner-m"></div>
<div class="[...] corner-xs"></div>
<div class="[...] corner-xl"></div>
<div class="[...] corner-full"></div>

Rounding corners separately

Use corner{-top?|bottom?}{-left?|-right?}{-size?} to only round specific corners on an element.

corner-top-s

corner-bottom-left-xl

corner-right-m

corner-left-full

<div class="[...] corner-top-s"></div>
<div class="[...] corner-bottom-left-xl"></div>
<div class="[...] corner-right-m"></div>
<div class="[...] corner-left-full"></div>