Description
bevel, scoop and notch introduce new interesting issues related to border radius constraining, and not just because we have to avoid the curves overlapping in the center; there are complexities around how the inner curves meet at over-constrained corners.
For example, here's an (almost) fully-constrained notch rendering:
.box {
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: silver;
border-width: 20px;
border-color: green;
border-style: solid;
corner-shape: notch;
border-radius: 29%;
}
Bump up the border-radius by a pixel, and the contents disappear:
If we don't do any constraining, then an even larger border-radius like border-radius: 49% will result in this:
and finally border-radius: 50% makes the box disappear entirely.
For scoop and notch it's less about obscuring the box content, and more about the complexities of the inner joins. Here's a "fully constrained" scoop:
where by "fully constrained" I mean the largest border radius where the inner arcs still meet at the inner border edge. Any more constrained, and arcs from adjacent corners intersect. bevel is similar.
However, some over-constrained renderings are desirable; it should be possible to make a sharp-pointed star with corner-style: scoop; border-radius: 50%. As an implementor I'm not relishing writing code to deal with inner shape intersections (don't forget that adjacent corners can have different corner-shapes), but it's probably doable. But what do we want?