coderef

corner-shapeLimited availability

The corner-shape CSS property sets the shape of an element's corners when using border-radius, allowing for shapes other than rounded corners. For example, corner-shape: squircle is a shape in between a square and rounded corner.

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–138Not supported
139+Supportedsince Aug 5, 2025
Current: 155
Edge
12–138Not supported
139+Supportedsince Aug 7, 2025
Current: 154
Firefox
✕Not supportedup to 157
Current: 157
Safari
✕Not supportedup to 27
Current: 27
MobileChrome Android
18–138Not supported
139+Supportedsince Aug 5, 2025
Current: 155
Firefox Android
✕Not supportedup to 157
Current: 157
Safari iOS
✕Not supportedup to 27
Current: 27

How to use

Not supported in Firefox, Safari, Firefox Android, Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: corner-block-end-shape.

Feature detection

CSS · check before using
@supports (corner-shape: initial) {
  /* styles that rely on corner-shape */
}

/* or in JavaScript */
if (CSS.supports("corner-shape", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (26). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
corner-block-end-shape139139✕✕139✕✕
corner-block-start-shape139139✕✕139✕✕
corner-bottom-left-shape139139✕✕139✕✕
corner-bottom-right-shape139139✕✕139✕✕
corner-bottom-shape139139✕✕139✕✕
corner-end-end-shape139139✕✕139✕✕
corner-end-start-shape139139✕✕139✕✕
corner-inline-end-shape139139✕✕139✕✕
corner-inline-start-shape139139✕✕139✕✕
corner-left-shape139139✕✕139✕✕
corner-right-shape139139✕✕139✕✕
corner-shape139139✕✕139✕✕
corner-start-end-shape139139✕✕139✕✕
corner-start-start-shape139139✕✕139✕✕
corner-top-left-shape139139✕✕139✕✕
corner-top-right-shape139139✕✕139✕✕
corner-top-shape139139✕✕139✕✕
<corner-shape-value>139139✕✕139✕✕
<corner-shape-value>.bevel139139✕✕139✕✕
<corner-shape-value>.notch139139✕✕139✕✕
Show 6 more
Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
<corner-shape-value>.round139139✕✕139✕✕
<corner-shape-value>.scoop139139✕✕139✕✕
<corner-shape-value>.square139139✕✕139✕✕
<corner-shape-value>.squircle139139✕✕139✕✕
<corner-shape-value>.superellipse139139✕✕139✕✕
<superellipse>139139✕✕139✕✕