[css-borders-4] Use cases for corner-shape

[jsnkuhn]

The point of this thread is to collect designs from existing websites where corner-shape would make web developers jobs easier. Current live sites are preferred to demos.

Some related links:

Similar thread from 2013 when the idea of corner-shape was first introduced (note: most use case example from this thread now are dead or link to pages that have been redesigned):
https://lists.w3.org/Archives/Public/www-style/2013Mar/0505.html

Lea's original svg corner-shape demo:
https://projects.verou.me/corner-shape/

The working draft spec in it's current state:
https://drafts.csswg.org/css-backgrounds-4/#corner-shaping

corner shape related paintAPI worklets:

• scoop (Surma): https://houdini.how/#demo-@houdini-modules/border-radius-reverse
  • all 4 corners scooped and same size for each
• Corner shapes (iamvdo): https://css-houdini.rocks/corner-shape
  • all 4 corners same shape and size. Round/bevel/scoop/notch options
• angled-corners (Una Kravets) https://houdini.how/#demo-angled-corners
  • border only no fill. option for different corner sizes per corner but only corners with same width and height
• squircle (PavelLaptev) https://pavellaptev.github.io/squircle-houdini-css/
• CSS corner-shape (jsnkuhn) https://github.com/jsnkuhn/corner-shape
  • filled and stroked background-image supported
  • --corner-shape allows per corner shaping including mixing of shapes (angle/scoop/notch/round)
  • --corner-size options for full border-radius 8 value slash syntax (allows for each corner to have different width and height)

Example Index:

Angle/Bevel

https://www.marvel.com/ (#6980 (comment))
https://www.zelda.com/ (#6980 (comment))
https://thewitcher.com/en/witcher3 (#6980 (comment))
https://www.leagueoflegends.com/en-us/ (#6980 (comment))
https://nierautomata.square-enix-games.com/en-us/home/ (#6980 (comment))
https://www.guerrilla-games.com/play/horizon (#6980 (comment))
https://www.animal-crossing.com/new-horizons/ (#6980 (comment))
https://squoosh.app/ (#6980 (comment))
https://www.polygon.com/ (#6980 (comment))
https://www.starwars.com/news/brian-volk-weiss-interview (#6980 (comment))
https://festival.gamesforchange.org/ (#6980 (comment))
opera GX new tab page (#6980 (comment))
https://elderscrolls.bethesda.net/en/skyrim (#6980 (comment))
https://www.videogameschronicle.com/ (#6980 (comment))
https://www.monsterhunter.com/rise/us/ (#6980 (comment))

Angle/Bevel extended

https://www.xbox.com/en-US (#6980 (comment))
https://metroid.nintendo.com/ (#6980 (comment))
discord.com (#6980 (comment))
https://www.smashbros.com/en_US/ (#6980 (comment))
https://www.marcustheatres.com/ (#6980 (comment))

---

Scoop

https://diamondpearl.pokemon.com/en-us/ (#6980 (comment))
https://playwonderlands.2k.com/ (#6980 (comment))
Community Theater site using simple background for a ticket shape
(#6980 (comment))
https://www.residentevil.com/village/us/ (#6980 (comment))
https://bethesda.net/en/game/starfield/media?type=video (#6980 (comment))

Scoop extended

---

Notch

https://www.zelda.com/links-awakening/ (#6980 (comment))

Notch extended

---

Squircle

Squircle extended

discord.com? (#6980 (comment))

---

Mixed shapes

https://playvalorant.com/en-us/ (#6980 (comment))
https://unite.pokemon.com/en-us/ (#6980 (comment))
VScode (#6980 (comment))

[jsnkuhn]

ANGLE EXAMPLES

https://www.marvel.com/

• call to action buttons: one with flat red, another with white border
• :before and :after used w/ border hacks
• corner-shape leads to considerably less code: corners: angle 16px 0;

https://www.zelda.com/ (footer links)

• this is the prototypical example of angled corners. All four corners with the same angle size.
• currently done with :before and :after background-images on the left and right of the parent element. Similar to how we use to do rounded corners before border-radius was a thing.
• also includes a border-radius... Guessing this was intended as a fallback? but never got removed? This implies there were a couple of attempts at how to do this.
• corner-shape code is just a one-liner: corners: angle 8px;

https://metroid.nintendo.com/

• long angle bottom edge and call to action buttons
• done with an absolute positioned inline SVG
• a little broken in Firefox
• long angle bottom edge corners: angle 0 0 90% 10% / 0 0 70px 42px;
• call to action buttons corners: angle 16px / 100% 0;

https://thewitcher.com/en/witcher3

• corners: angle 28px 0 0 28px/ 50% 0 0 50%;

https://www.leagueoflegends.com/en-us/

• many different examples
• currently done with canvas
• many with hover animations that would be made trivial with corner-shape

button{
	corners: angle 11px 0;
	transition: corners .25s;
}
button:hover{
	corners: angle 0 0;
}

https://www.xbox.com/en-US

• horizontal rule kinda thing
• appears to currently use an icon font
• corners: angle 9px 0 / 100% 0;

ANGLE AND NOTCH

https://playvalorant.com/en-us/

• angled corner bottom left, notched corner bottom right

• border-radius: 0 0 95px 95px / 0 0 6px 54px;
corner-shape: none none notch(?) angle;

[LeaVerou]

It seems to me that almost all of these examples are bevel corners and various types of polygons/parallelograms/trapezoids etc. None of them are using corner-shape: notch | scoop.

Furthermore, I feel that using corner-shape to create polygons, triangles etc is a bit of a hack. I wonder if what we actually need is something like element-shape: <shape>, and then borders, shadows etc would follow that shape.

This allows creating "bevel" corners like this:

--corner-size: 10px;
element-shape: polygon(
	var(--corner-size) 0, calc(100% - var(--corner-size)) 0, /* top */
	100% var(--corner-size), 100% calc(100% - var(--corner-size)), /* right */
	calc(100% - var(--corner-size)) 100%, var(--corner-size) 100%, /* bottom */
	0 calc(100% - var(--corner-size))
);

…which is admittedly a lot more involved than corner-shape: bevel; but also allows creating arbitrary shapes, even SVG paths.

From what I remember the tricky bit of implementing/specifying all of these is border geometry, especially when top, right, bottom, left borders all have different thicknesses and/or colors. Given that the use cases that actually require a non-uniform border AND a custom shape are practically nil, I wonder if there's an easy way to get this out of the way, even if the visual result in these rare cases is suboptimal. @fantasai would love your input.

[SelenIT]

Anothe useful, though not much used because of difficuilty of implementation, corner shape seems to be the "squircle" or "superellipse" shape, or at least its approximation with Bezier curves. Searching for "CSS squircles" shows quite a lot of attempts to solve it with existing tools (mostly complex clip-path or even Houdini).

[LeaVerou]

Anothe useful, though not much used because of difficuilty of implementation, corner shape seems to be the "squircle" or "superellipse" shape, or at least its approximation with Bezier curves. Searching for "CSS squircles" shows quite a lot of attempts to solve it with existing tools (mostly complex clip-path or even Houdini).

That is yet another argument for element-shape above, which would allow this fairly easily.

[Lorp]

@SelenIT wrote:

Anothe useful, though not much used because of difficuilty of implementation, corner shape seems to be the "squircle" or "superellipse" shape, or at least its approximation with Bezier curves. Searching for "CSS squircles" shows quite a lot of attempts to solve it with existing tools (mostly complex clip-path or even Houdini).

In #6296 I suggested cubic-bezier() as a way of getting squircular corners without needing syntax for arbitrary shapes:

How about allowing cubic-bezier() as an alternative to round? Syntax would be the same as in animation-timing-function, and it would be scaled and flipped appropriately for each corner.

[jsnkuhn]

Did run across a 4 corner notched example. Something like corners: notch 8px;:

https://www.zelda.com/links-awakening/

Very much agree that corner-shape for polygons gets messy. Once you start using the slash syntax to give corners different widths and heights things get hard to follow. And even more when you throw a 100% corner height or width in it kinda ceases to be a corner anymore.

Didn't @tabatkins post something on twitter not too long ago about an idea for a CSS syntax for creating SVGs?

What makes the polygon creating an issue is all the calc(100% - var(--corner-size)) repetition. Would it be possible to come up with a unit that was a 100% - value unit?

[SelenIT]

Maybe element-shape could (optionally) share the 9-slice scaling pattern with border-image/mask-border, making coordinates of corners independent from the size of the image itself?

[LeaVerou]

Maybe element-shape could (optionally) share the 9-slice scaling pattern with border-image/mask-border, making coordinates of corners independent from the size of the image itself?

They already are independent in everything but path() (and there are thoughts to extend path() in that direction).

[jsnkuhn]

found the tweet I mentioned above:

Working on this really makes me want to take up the "SVG embedded in CSS" project again, so you could write:@svg --bg {
width: 200px;
height: 300px;
@rect {
x: 0; y: 0; width: 100%; height: 100%;
fill: green;
}
}

Then `background: svg(--bg);` to use it.

— pascal's banger (@tabatkins) December 23, 2021

Also was just thinking that when border-radius was added I think it was just that folks wanted the rounded corners? but the ability to do circles with the border-radius: 50%; value just came along with it? It occurs to me that the same sort of things happens with the angled corner. Except it would be 2 shapes. corners: angle 50%; would gets you a diamond shape and corners: angle 25%; would give a fairly even octagon.

[jsnkuhn]

still not having a whole lot of luck finding scoop or notch examples. If anyone knows of places where these are common please don't hesitate to drop links or point in the right direction.

https://diamondpearl.pokemon.com/en-us/

• corners: scoop 10px;

https://nierautomata.square-enix-games.com/en-us/home/

• the above mentioned diamond shape backgrounds
• i'm assuming corner-shape wouldn't clip the content overlapping the corners
• corners: angle 50%;
• also has an angle on the right side of the header

https://www.guerrilla-games.com/play/horizon

• triangle behind logo in header: corner-bottom-right: angle 100%; (so that looks like it makes many of the border hack triangle shapes pretty easy at least the diagonally pointed ones)
• top right corner bevel: corner-top-right: angle 30px;

https://www.animal-crossing.com/new-horizons/

• call to action button
• first one of these that I've run into that is actually an SVG
• corners: angle 30px / 20px;

https://www.pokemon.com/us/

• might be more a polygon and less a corner shape but could probably do a close approximation

https://unite.pokemon.com/en-us/

• square, angle, round, angle

[jsnkuhn]

Because someone is likely to ask... No you couldn't really do the twitter NFT shape with corner-shape. The general hexagon shape yes, but you'd need an SVG path to get all the detail.

corner-shape: bevel (angle)
border-radius: 25% / 50% 
width: 400px
height: 300px

[SebastianZ]

@LeaVerou wrote:

Furthermore, I feel that using corner-shape to create polygons, triangles etc is a bit of a hack. I wonder if what we actually need is something like element-shape: <shape>, and then borders, shadows etc would follow that shape.

I love the idea of being able to define individual shapes for elements. Though I believe this goes far beyond the use case of specifying a different shape for a corner defined via border-radius and therefore deserves its own discussion. So I've created #6997 for that.

Sebastian

[bradkemper]

I think the problem with finding scoop and notch examples is that there isn't an easy way to hack them. Using 'border-image' requires an image, and trying to do it a vector image (SVG) is complicated and slow-rendering and sometimes inconsistent. I think if 'corner-shape' existed and could do scoops, we'd see a lot more designs with scoops, as there are in print design.

[LeaVerou]

If something is doable with an image, that's annoying but not enough to deter people from using it in production. People have been using images for effects they cannot do in CSS for decades.

[bradkemper]

I'm not keen on having yet another way to create polygons and paths. I'd rather we found a way to unite shape-outside and clip-path, and apply borders and box-shadows and filters to those shapes (maybe a keyword to shape-outside or clip-path that does that, with only border-top going all the way around the shape, and maybe with an extra control for how pointy or rounded the miters are).

[faceless2]

I agree with Brad's comments above - we already have these concepts in CSS, we shouldn't be trying to reinvent an (arbitrarily-shaped) wheel.

Someone mentioned border-image above - I think this is the model to follow for several reasons:

1. When specified it overrides all the border properties, and defines the entire outline in one go. The alternative is deciding where "left" stops and "top" starts, which is impractical for arbitrary shapes.

2. It explicitly has no impact on the box-sizing calcs, which is going to be really important.

3. Because of the previous point, it introduces the concept of expanding the visible outline of the box by a certain number of pixels - i.e. drawing outside the nominal border-box. This approach would work well for shapes too (every browser already has code to expand or contract a path, as we have to do it when clipping to SVG stroke outlines). And allowing shapes to be expanded or contracted means you can reuse existing outlines like the shape-outside or clip-path.

So, personally, I'd go with something more like a single border-shape property. Like border-image it completely overrides all the border properties if specified, it has no-impact on box-sizing at all, and as well as the style/color/width it takes both:

• a path or the keywords shape-outside and/or clip-path to reference those shapes.
• the number of pixels to expand/contract that path.

As this builds on the conceptual models of border-image we'd be able to implement it using the same approach without too much trouble.

[jsnkuhn]

VScode

• as i understand it vscode is written with css?
• top left corner star background

discord.com

• how many peeps in a room counter

https://squoosh.app/

• inline svg

https://www.polygon.com/

• was hoping that they'd be using clip-path: polygon(); on ploygon.com but nope border hack.
• corner-top-right: angle 30px;

https://www.smashbros.com/en_US/

• lots of angles, so many I couldn't get them all in 1 screenshot
• so... many... border... hacks

https://www.starwars.com/news/brian-volk-weiss-interview

• author image

https://festival.gamesforchange.org/

• currently just an images but could be div with corner-shape
• corners: angle 0 32px 32px 32px;

opera GX new tab page

• corners: angle 14px 4px;

[jsnkuhn]

some observations from this so far:

• no use of border-image

  • This aligns with my general experience that most web Devs still don't seem to know that border-image is a thing.
  • Or they know about it but think it's super complicated and therefore avoid it (may have never even tried it).

• little use of clip-path

  • honestly always more fiddly than you think it'll be
  • mostly have to use a generator (like clippy - https://bennettfeely.com/clippy/ ) at least for starters
  • calc(100% - var()) to be responsive
  • if you've never used it and check support it's honestly kinda confusing because of how piece meal browser implementation was

• in both above cases you have to draw out the entire shape excluding the corner shape(s) you want. Which feels like using a hammer to put a thumb-tack in a cork-board.

  • This is the opposite of the corner-shape/border-radius approach where you would deal with just the corners.

• devs will still work really hard (sometime to extremes) to not download an image.

[jsnkuhn]

Maybe the start of a more complete paint API polyfill for corner-shape? Currently supports only angled corners but with the option for the full 8 value border-radius/corner-size syntax (ie border-radius: 0 50% 50% 0 / 0 25% 25% 0;). Currently a Codepen but can throw this up on github if anyone else is interested in helping out?:

https://codepen.io/jsnkuhn/pen/NWgBBdO?editors=1100

[bradkemper]

• no use of border-image

  • This aligns with my general experience that most web Devs still don't seem to know that border-image is a thing.

  • Or they know about it but think it's super complicated and therefore avoid it (may have never even tried it).

I think you are probably right. As one of the authors of that spec, it is disappointing, but I also don't use it much. With raster images:

• Have to make a new image every time you want to change shape, color, etc.
• Have to make it at least twice the size in order to make sure it looks good on high resolution (Retina) displays.
• Have to deal with moving more files around, deploying to server, etc.
• Fun times hoping you have the PhotoShop (or whatever) color space settings right in order for the color in the image match the same color in the browser.

SVG can be used, but that adds different complications. It can be super complicated, depending on what you are trying to achieve, and it can render slowly, and there are browser differences.

• devs will still work really hard (sometime to extremes) to not download an image.

I think I tend to be in that camp, especially with raster images.

[jsnkuhn]

Another scooped corners example

https://playwonderlands.2k.com/

• made with circles at the corners with radial gradients that are then masked
• corner-shape equivalent: corners: scoop 8px;

[bradkemper]

Community Theater site using simple background for a ticket shape.

[jsnkuhn]

Don't really know how many more angle/bevel examples we really need but thought this was notable because its a rather big named site:

https://www.marcustheatres.com/

• done with border triangle as ::after
• corner-shape: angle;
• corner-size: 0, 100% 20px, 0 0;

[jsnkuhn]

A few days ago someone in Kevin Powell's discord asked about creating the below shape in CSS. corners: scoop 50%; would make this super easy.

[jsnkuhn]

Update on the paint API polyfill for corner-shape I was making: it now mostly works! Supports angle, notch, scoop, square and round shapes. No % support yet for sizes.

Demo page can be found here (chromium only for now): https://jsnkuhn.github.io/corner-shape/

[jsnkuhn]

So this is a little bit different but still use case related:

note the styling difference between the promo image from a blog post (on the top)
https://www.starwars.com/news/star-wars-celebration-live-2022

and the way the same thing is styled on the website (on the bottom)
https://www.starwarscelebration.com/en-us/home/announcement.html

This is just speculation on my part but i'm guessing they would be more similar if it would be easier to do:

[jsnkuhn]

https://wotvffbe.com/

example of a potential border-style: double; like design with a corners: angle 50%

[jsnkuhn]

https://dragonquest.square-enix-games.com/games/en-us/infinity-strash/

another basic scoop example

[jsnkuhn]

https://seaofstarsgame.co/

The header and the back/forward buttons are notched corners. The tabs and their associated content area have scooped corners. Some with borders, some with (potentially) borders and box-shadows, and some with no borders at all.

[jsnkuhn]

Starting to see more people asking about creating shapes like these. With corner-shape this would be a border-radius plus a corner-shape: notch; In this example there is a transition from something like corners: none notch none none 24px; to corners: notch 0; on hover.

[jsnkuhn]

Something a little different. Have an anecdote from a person that asked a question on Kevin Powell's discord about how to create a fairly straight forward angled corner element with a border and a transparent background. The community offered a few different options for the design (the usual mask-image or clip-path stuff) but when the poster realized how much work it was going to be they decided to change the design of the page instead of dealing with the angled corners. If corner-shape were an option this could have been avoided.

[jsnkuhn]

Similar to but more involved than one from last week. Three notched corners with different widths and a border-radius to round the joints maybe.

[jsnkuhn]

So the above design seems to be a new trend. Finally ran into a site using this live. Playstation's 2023 Wrap-Up. Don't have a Playstation account so can't login and have a look at how they are doing it but maybe someone else can?

https://blog.playstation.com/2023/12/12/playstation-2023-wrap-up-launches-today-with-a-personalized-look-at-your-2023-gaming-achievements/

[clshortfuse]

SVG image:

The cards use shared url in clip-path with the following path:

M0.039,0 C0.018,0,0,0.012,0,0.028 V0.972 C0,0.988,0.018,1,0.039,1 H0.961 C0.982,1,1,0.988,1,0.972 V0.028 C1,0.012,0.982,0,0.961,0 H0.039 M0.026,0.12 V0.953 C0.026,0.969,0.044,0.981,0.066,0.981 H0.549 C0.568,0.981,0.582,0.971,0.582,0.958 V0.926 C0.582,0.913,0.597,0.903,0.615,0.903 H0.938 C0.956,0.903,0.97,0.892,0.97,0.88 V0.044 C0.97,0.028,0.953,0.016,0.931,0.016 H0.493 C0.475,0.016,0.461,0.026,0.461,0.039 V0.074 C0.461,0.086,0.446,0.097,0.428,0.097 H0.059 C0.041,0.097,0.026,0.107,0.026,0.12

Edit: Will note the website doesn't support browser font-scaling. (WCAG 1.4.4)

[jsnkuhn]

Another live example of the inverted border radius thing from https://www.cutthecode.com/

This one is done with an image in an SVG with a clipPath. Could once again be easier with corner-shape: notch; plus border radius to round the corners of the notches.

[jsnkuhn]

https://defleppard.com/home/

Lots of angled examples here. Shouldn't be surprising considering Def Leppard's logo. Does a good job of showing off some of the issues you can run into using pseudo elements to add on the angles to a rectangle. Some of the angled corners look like they fit perfectly and some have 1px (or possibly less) spaces between the elements and the pseudos.

[jsnkuhn]

with a notched corner and a clip-path I came up with this corner design I was asked to do. It seems like there would be a ton of possibilities with this combination of properties:

[jsnkuhn]

Another question from Kevin Powell's discord: This time looking for a combo of round and scooped corners with a dotted border. Again the op ultimately came to the conclusion that it would be too hard to implement and went with a different design.

[jsnkuhn]

just a codepen demo (https://codepen.io/Azametzin/pen/PoVjRZy) but similar to some previous notch + border-radius examples but with a bit more grid overlapping:

[silasabbott]

All web apps built with Ionic or Framework 7 currently released in the iOS App Store are unable to imitate squircle/smooth corners found throughout iOS.

This has already been mentioned, but I wanted to highlight those frameworks because plenty of web-based apps are actively using them. Having the ability to smooth corners would make those apps feel more native on iOS.

https://ionicframework.com/docs/api/button

[jsnkuhn]

Another example from a discord question. This time for angled corners and a border-style: double;

[jsnkuhn]

https://www.nintendo.com/jp/switch/bdgea/index.html

A 2 for 1 page:

1: Scooped cornered headings accomplished with :before and :after images the way we use to do round corners back before border-radius was a thing. corner-shape: scoop; would remove the need for the images.

2: Angled cornered element with a solid border. This was done with a background-image so the corners stretch and distort at different viewport widths. So, maybe would be a bit more bullet proof as a border-image. Either way corner-shape: angle; would make things easier here.

[jsnkuhn]

https://www.dqx.jp/online/

This is an corners: angle 9999px; use case. Of note is the border-style: double; and gradient coloring.

[SebastianZ]

https://www.dqx.jp/online/

This is an corners: angle 9999px; use case. Of note is the border-style: double; and gradient coloring.

Or something like corners: angle maximum; if we resolve on a keyword for the maximum radius in #6467.

Sebastian

[jsnkuhn]

This is a GIANT chart of the Warhammer timeline. They use different shapes to denote media type. Currently implemented in SVG as you'd expect but some of the hover styling is slightly off. corner-shape or something similar would probably help here:

http://gaming.kylebb.com/hhtimeline/

[jsnkuhn]

Google's Material Design 3 has a "cut corner" shape option (this is the same as corner-shape's "angle" option):

https://m3.material.io/styles/shape/shape-scale-tokens#bbf4c8e4-88ed-42a2-be5f-2f776465f6bc

[noamr]

I believe that the new corner-shape covers all of this! Care to confirm?

[PeterNjeim]

@noamr I'm using your demo website (https://noamr.github.io/squircle-testbed) and trying to achieve the shape I want. I set the border-radius to 50 and used the formula ln(n)/ln(2)=K and indeed it works for cutting the corner. However, I don't want to cut the corner, I want to round it out. For example, if I want to make a circle with the superellipse option, with border-radius 50 I need to set K to around -0.83, but I'm not sure what formula I need to use to get this number. With some math I got ln(0.56)/ln(2)≈-0.83, but I don't know how to obtain the 0.56 without knowing the negative K value in the first place. I want to set the exponent to 5 (which is what Apple uses), but I don't know the corresponding negative K value to make it work. Any ideas?

[noamr]

@noamr I'm using your demo website (https://noamr.github.io/squircle-testbed) and trying to achieve the shape I want. I set the border-radius to 50 and used the formula ln(n)/ln(2)=K and indeed it works for cutting the corner. However, I don't want to cut the corner, I want to round it out. For example, if I want to make a circle with the superellipse option, with border-radius 50 I need to set K to around -0.83, but I'm not sure what formula I need to use to get this number. With some math I got ln(0.56)/ln(2)≈-0.83, but I don't know how to obtain the 0.56 without knowing the negative K value in the first place. I want to set the exponent to 5 (which is what Apple uses), but I don't know the corresponding negative K value to make it work. Any ideas?

I think the k in the demo needs to be fixed.
With a 50% border-radius:

• In the current spec options, a circle would be k=1 or k=2, or the keyword round (which is the default)
• A squircle would be k=2 or k=4.
• A "5" exponent would be something like 2.3 or k=5.

[jsnkuhn]

I believe that the new corner-shape covers all of this! Care to confirm?

It seems that all of the basic corner shapes (angle/bevel, notch, scoop, squircle) are covered but the rounded variants of those basic shapes would still need addressing.

a few examples example:

• Rounded angled corners:
  [css-borders-4] Use cases for corner-shape #6980 (comment)

• Rounded notched corners (these seem to be getting very popular):
  [css-borders-4] Use cases for corner-shape #6980 (comment)
  [css-borders-4] Use cases for corner-shape #6980 (comment)

[noamr]

I believe that the new corner-shape covers all of this! Care to confirm?

It seems that all of the basic corner shapes (angle/bevel, notch, scoop, squircle) are covered but the rounded variants of those basic shapes would still need addressing.

a few examples example:

• Rounded angled corners:
  [css-borders-4] Use cases for corner-shape #6980 (comment)
• Rounded notched corners (these seem to be getting very popular):
  [css-borders-4] Use cases for corner-shape #6980 (comment)
  [css-borders-4] Use cases for corner-shape #6980 (comment)

Thanks!
These are all possible by using polygon() or shape(), isn't it so?
I'm not sure we can generalize all of these cases as "corners", most of them look to me like bespoke shapes... Also some of them would require more than one set of radii to work, so overloading all of this on the concept on "corners" might not work out.

Perhaps if some of them become common we can have special basic shapes for them, but let's start with letting people go crazy with shape() and see how far they get?

Note that neither shape() or corner-shape are set up for changing the flow of the text inside them, which is required by #6980 (comment) for example.