Base on the corner-shape CSS property. Pair corner-shape-* with a rounded-* utility on the same element.
bg-surface-50-950 preset-filled-primary-500 preset-filled-secondary-500 preset-filled-tertiary-500 preset-filled-success-500 preset-filled-warning-500 preset-filled-error-500 preset-filled-surface-500 bg-linear-to-br from-primary-500 to-secondary-500 bg-linear-to-br from-secondary-500 to-tertiary-500 bg-linear-to-br from-tertiary-500 to-primary-500
round
bevel
notch
scoop
squircle
straight
--- const commonClasses = 'size-20 preset-filled rounded-xl text-xs font-medium grid place-items-center' ; --- < div class = "grid grid-cols-3 gap-4" > < div class ={ `${ commonClasses } corner-shape-round` }>round</ div > < div class ={ `${ commonClasses } corner-shape-bevel` }>bevel</ div > < div class ={ `${ commonClasses } corner-shape-notch` }>notch</ div > < div class ={ `${ commonClasses } corner-shape-scoop` }>scoop</ div > < div class ={ `${ commonClasses } corner-shape-squircle` }>squircle</ div > < div class ={ `${ commonClasses } corner-shape-straight` }>straight</ div > </ div > Class Description corner-shape-roundStandard circular curve (default) corner-shape-bevelStraight diagonal cut across the corner corner-shape-notchInverted bevel that carves into the corner corner-shape-scoopConcave curve that scoops inward corner-shape-squircleSuperellipse with a softer curve than round corner-shape-straightSharp 90° corner corner-shape-noneRemoves any shape property
Browser Support Warning
Currently available in a limited set of browsers. Follow progressive enhancement best practices when using it.
Browser Support Chrome 139+ Edge 139+ Firefox ⚠️ Not yet supported Safari ⚠️ Not yet supported Chrome for Android 147+ Safari on iOS ⚠️ Not yet supported
Individual Sides
Target a single physical side; each covers its two adjacent corners.
bg-surface-50-950 preset-filled-primary-500 preset-filled-secondary-500 preset-filled-tertiary-500 preset-filled-success-500 preset-filled-warning-500 preset-filled-error-500 preset-filled-surface-500 bg-linear-to-br from-primary-500 to-secondary-500 bg-linear-to-br from-secondary-500 to-tertiary-500 bg-linear-to-br from-tertiary-500 to-primary-500
--- const commonClasses = 'size-20 preset-filled text-xs font-medium grid place-items-center' ; --- < div class = "grid grid-cols-2 gap-4" > < div class ={ `${ commonClasses } rounded-t-xl corner-shape-t-bevel` }>-t-</ div > < div class ={ `${ commonClasses } rounded-r-xl corner-shape-r-bevel` }>-r-</ div > < div class ={ `${ commonClasses } rounded-b-xl corner-shape-b-bevel` }>-b-</ div > < div class ={ `${ commonClasses } rounded-l-xl corner-shape-l-bevel` }>-l-</ div > </ div > Class Description corner-shape-t-*Top side corner-shape-r-*Right side corner-shape-b-*Bottom side corner-shape-l-*Left side
Individual Corners
Target a single physical corner.
bg-surface-50-950 preset-filled-primary-500 preset-filled-secondary-500 preset-filled-tertiary-500 preset-filled-success-500 preset-filled-warning-500 preset-filled-error-500 preset-filled-surface-500 bg-linear-to-br from-primary-500 to-secondary-500 bg-linear-to-br from-secondary-500 to-tertiary-500 bg-linear-to-br from-tertiary-500 to-primary-500
--- const commonClasses = 'size-20 preset-filled text-xs font-medium grid place-items-center' ; --- < div class = "grid grid-cols-2 gap-4" > < div class ={ `${ commonClasses } rounded-tl-xl corner-shape-tl-bevel` }>-tl-</ div > < div class ={ `${ commonClasses } rounded-tr-xl corner-shape-tr-bevel` }>-tr-</ div > < div class ={ `${ commonClasses } rounded-br-xl corner-shape-br-bevel` }>-br-</ div > < div class ={ `${ commonClasses } rounded-bl-xl corner-shape-bl-bevel` }>-bl-</ div > </ div > Class Description corner-shape-tl-*Top-left corner corner-shape-tr-*Top-right corner corner-shape-br-*Bottom-right corner corner-shape-bl-*Bottom-left corner
Logical Properties
Target sides and corners that flow with the document’s writing direction. These flip automatically in right-to-left layouts.
bg-surface-50-950 preset-filled-primary-500 preset-filled-secondary-500 preset-filled-tertiary-500 preset-filled-success-500 preset-filled-warning-500 preset-filled-error-500 preset-filled-surface-500 bg-linear-to-br from-primary-500 to-secondary-500 bg-linear-to-br from-secondary-500 to-tertiary-500 bg-linear-to-br from-tertiary-500 to-primary-500
-s-
-e-
-ss-
-se-
-ee-
-es-
--- const commonClasses = 'size-20 preset-filled text-xs font-medium grid place-items-center' ; --- < div class = "grid grid-cols-2 gap-4" > < div class ={ `${ commonClasses } rounded-s-xl corner-shape-s-bevel` }>-s-</ div > < div class ={ `${ commonClasses } rounded-e-xl corner-shape-e-bevel` }>-e-</ div > < div class ={ `${ commonClasses } rounded-ss-xl corner-shape-ss-bevel` }>-ss-</ div > < div class ={ `${ commonClasses } rounded-se-xl corner-shape-se-bevel` }>-se-</ div > < div class ={ `${ commonClasses } rounded-ee-xl corner-shape-ee-bevel` }>-ee-</ div > < div class ={ `${ commonClasses } rounded-es-xl corner-shape-es-bevel` }>-es-</ div > </ div > Class Description corner-shape-s-*Inline-start side corner-shape-e-*Inline-end side corner-shape-ss-*Start-start corner corner-shape-se-*Start-end corner corner-shape-ee-*End-end corner corner-shape-es-*End-start corner
Theme Variables
Two utilities consume theme tokens, allowing the active theme to drive the corner shape across your interface.
bg-surface-50-950 preset-filled-primary-500 preset-filled-secondary-500 preset-filled-tertiary-500 preset-filled-success-500 preset-filled-warning-500 preset-filled-error-500 preset-filled-surface-500 bg-linear-to-br from-primary-500 to-secondary-500 bg-linear-to-br from-secondary-500 to-tertiary-500 bg-linear-to-br from-tertiary-500 to-primary-500
< div class = "flex flex-col items-center gap-4" > <!-- Base --> < button type = "button" class = "btn preset-filled corner-shape-base" >base</ button > <!-- Container --> < div class = "card preset-filled corner-shape-container p-4" >container</ div > </ div > Class Theme Property Role corner-shape-basevar(--corner-shape-base)Target small elements like buttons corner-shape-containervar(--corner-shape-container)Target large elements like cards
Using a Custom Value
Use the corner-shape-[<value>] syntax to set the corner shape based on a completely custom value.
< div class = "corner-shape-[squircle] rounded-2xl ..." > <!-- ... --> </ div > For CSS variables, you can also use the corner-shape-(<custom-property>) syntax.
< div class = "corner-shape-(--my-corner-shape) rounded-2xl ..." > <!-- ... --> </ div > This is just a shorthand for corner-shape-[var(<custom-property>)] that adds the var() function for you automatically.
The same [<value>] and (<custom-property>) patterns work for every side, corner, and logical variant — for example corner-shape-tl-[bevel] or corner-shape-s-(--my-corner-shape).
Global Theming
To apply a corner shape across a family of elements, target the class in your global stylesheet and pair it with a matching radius scale. Note this pattern works with any class or element that uses border-radius.
.btn , .btn-icon , .chip , .chip-icon , .badge , .badge-icon { corner-shape : var ( --corner-shape-base ); } .card { corner-shape : var ( --corner-shape-container ); }