Motivation

There is a wide variety of use cases where authors want to clip or mask an element based on a shape that is basically a simple polygon plus rounding. Right now this is exceedingly complicated to do by hand (since you'd need to use path()), and practically impossible to do with the same flexibility of units that polygon() supports.

Tons of SO questions about this:

• https://stackoverflow.com/questions/31765345/how-to-round-out-corners-when-using-css-clip-path
• https://stackoverflow.com/questions/46417361/clip-path-polygon-with-curve-edges
• https://stackoverflow.com/questions/62176115/clip-path-polygon-rounded-edge
• Breadcrumb shapes
  
• Speech bubbles where the pointer is not actually a separate element:
  
  • Why? E.g. to crop a picture in that shape
    
• https://stackoverflow.com/questions/62453115/how-to-make-a-rounded-triangle-using-clip-path
• Rounded parallelogram picture cutout
  
• Rounded tabs
  
• https://stackoverflow.com/questions/69634813/rounded-corner-on-clip-path-polygon
• https://stackoverflow.com/questions/74221270/any-idea-how-i-can-make-radial-corners-on-a-clip-path-polygon
• https://stackoverflow.com/questions/75429805/angled-edge-with-css-clip-path-and-rounded-corners
• https://stackoverflow.com/questions/77521892/how-to-curve-a-custom-polygon-element-with-a-clip-path-property
  
• https://stackoverflow.com/questions/65045478/css-clip-path-polygon-rounded-borders
• https://stackoverflow.com/questions/51616941/how-to-make-radial-corners-in-clip-path-look-clean
• https://stackoverflow.com/questions/72539766/how-to-make-the-edge-of-a-button-round-with-clip-path
• https://stackoverflow.com/questions/70865868/how-do-i-make-the-edges-of-the-hexagon-image-round
• …and many others

It also reminded me of my W3Conf 2013 site design:

The proposal

A good chunk of use cases only requires a single radius for all corners, and I have yet to see a use case that requires different horizontal and vertical radii. Therefore, even something as simple as the following would go a long way.

Change polygon() grammar from:

<polygon()> = polygon(
  <'fill-rule'>? ,
  [<length-percentage> <length-percentage>]#
)

to

<polygon()> = polygon(
  <'fill-rule'>? [round <length>]?,
  [<length-percentage> <length-percentage>]#
)

To cover even more use cases we could also explore allowing [round <length>]? on a per-point basis, to customize rounding for a specific point. This can ship later.

Rendering

There is always exactly one circle of a given radius that is tangential to each side adjacent to a corner < 180deg.

For corners >= 180deg, the other side would be used: