Repository navigation
corner-shape #398
Description
This GitHub issue is for collecting web developer signals for corner-shape.
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.
Browser support
- Chrome 139 (Aug 5, 2025)
- Chrome Android 139 (Aug 5, 2025)
- Edge 139 (Aug 7, 2025)
- Firefox: not supported
- Firefox for Android: not supported
- Safari: not supported
- Safari on iOS: not supported
Give us feedback
If you're pressed for time, but you want this feature to be available in all browsers, please give this issue a thumbs up 👍 reaction.
However, a much better guide for us is to know how you'd use this feature, and what you're having to do in the meantime. This helps us judge the priority versus other features.
Copy the template below in a comment, and add the details that matter to you.
## What I want to do with this feature
<!-- Add your specific use-cases, even if they seem obvious to you. -->
## What I'm having to do in the meantime
<!--
Are you having to use another feature instead, a polyfill, or is it blocking you completely?
Why are the alternatives worse than using this feature?
-->All comments are expected to adhere to the Code of Conduct.
Learn more
You can learn more about this feature here:
Activity
80GritPolymath commentedon Sep 16, 2026
What I want to do with this feature
Better HUD-style UI elements.
What I'm having to do in the meantime
SVG shapes for containers.
jakearchibald commentedon Sep 16, 2026
For folks wanting this feature, I'm curious to know if
border-shapewould serve you better, and if not, why.My gut feeling is that supporting
corner-shapein addition toborder-shapewould be a small lift, but in case it comes down to a choice, I want all the data 😄matthewmorete commentedon Sep 16, 2026
border-shape is significantly more powerful so if there was a choice between the two I'd prefer border-shape. But for some common use cases corner-shape is so much easier to use.
Bevel corners with border-shape requires at least 8 commands and 8 var calls to get the same control that corner-shape gets in 2 short properties.
Afif13 commentedon Sep 16, 2026
I am 1000% for using only border-shape, but I want to highlight a specific use case only doable with corner-shape. The latter works with border-style, so we can, for example, have a "double" or "dotted" configuration using corner-shape and not with border-shape.
As for syntax complexity, there will be a lot of generators for different shape() (I've already made a few of them), so it won't be a big deal in the future.
yisibl commentedon Sep 17, 2026
I'd like to add that both Firefox and Safari are implementing
corner-shape; especially Safari should be reaching the “Ship” status soon.cc @smfr
shiromu-kara commentedon Oct 4, 2026
What I want to do with this feature
My work consists of coding stream overlays and sometimes the design isn't just a simple rounded corner
What I'm having to do in the meantime
I have to do 4
mask-images -- 1 for each corner, even when I only need 1 corner -- and the results may leave a thin gap in the middle of the shape if not configured correctly. and since I'm mostly code with Firefox, the result may differ when viewed in Chromium(-based browsers), which what OBS and most people use