Skip to content

[css-borders-4] corner-shape should impact the rendering of disjoint color corner joins #11764

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

Open
smfr opened this issue Feb 23, 2025 · 2 comments

Comments

@smfr
Copy link
Contributor

smfr commented Feb 23, 2025

I think corner-shape: notch should affect how the join between two colors is rendered.

Here's a rendering of

        .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-right-width: 0;
            border-bottom-width: 0;
            border-top-left-radius: 34%;
            border-left-color: blue;
        }

Image

Now if we make the left border thinner, we get:

Image

This looks wrong. I think the color join should happen along the intersection of the two inner corners of the notch.

With other corner shapes, the corner join that falls out of existing code (a line intersecting the border box and padding box corners) seems OK (excuse the glitchy rendering):

Image

@tabatkins
Copy link
Member

Sounds reasonable, tho note that "notch" is just the result of an infinitely negative value for superellipse(), so it should produce this behavior as a smooth limit. Perhaps it can start transitioning from the "default" position to the "notch" position starting at the inverse squircle value (-2) and ending at, say, -10?

@noamr
Copy link
Collaborator

noamr commented May 24, 2025

The current CSS spec doesn't specify color joins in an interoperable way. Do we want to change this here?

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

3 participants