Skip to content

[css-borders-4] How should radius-constraining work for bevel, scoop and notch corner-shapes? #11763

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
smfr opened this issue Feb 23, 2025 · 4 comments

Comments

@smfr
Copy link
Contributor

smfr commented Feb 23, 2025

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%;
        }

Image

Bump up the border-radius by a pixel, and the contents disappear:

Image

If we don't do any constraining, then an even larger border-radius like border-radius: 49% will result in this:

Image

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:

Image

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?

@smfr
Copy link
Contributor Author

smfr commented Feb 23, 2025

cc @noamr @fserb

@noamr
Copy link
Collaborator

noamr commented Feb 23, 2025

Is this any different than #11610?
The way I've dealt with this so far in the prototype is that the outer radius is slightly lower than the original (inner radius - border-width). This creates a situation where the shape is always painted inside the corner and the curvature is maintained (the formula is not complete yet in the codepen though, as for curvatures more concave than scoop additional adjustment is needed because of how the inner/outer paths work)

@smfr
Copy link
Contributor Author

smfr commented Feb 23, 2025

Duplicate of #11610 but my pictures are nicer.

@smfr smfr closed this as completed Feb 23, 2025
@noamr
Copy link
Collaborator

noamr commented Feb 23, 2025

Duplicate of #11610 but my pictures are nicer.

They absolutely are!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants