Re: [csswg-drafts] [css-borders-4] Specify how borders are rendered for `corner-shape` (#11610)

> > In this example I notice that the thicker right border's width is maintained through the entirety of the top-right angled corner. The width of the drawn border does not transition from the `border-top-width` to the `border-right-width` like in the codepen. Or is there a way to accomplish this that I'm not seeing?
> > ![Image](https://github.com/user-attachments/assets/b248b5ef-010d-45ed-ba3b-63667211d61d)
> 
> There is no current semantic for defining where the corner gets the `border-width` from, so it interpolates between the two sides... A corner like in the picture would only be available with `border-shape` ATM.

In practice what I'd be more likely to do than draw out the 2 more complicated paths (likely with a generator) for `border-shape` here is use a consistent 1px border then extend the right/left sides with drop-shadows (assuming drop-shadow works the way I expect). 

```css
corner-size/border-radius: 0 14px / 0 20px;
corner-shape: square bevel;
/* (or just `bevel` i guess because the 0 corner size will make the corner square anyway?) */
border-color: solid 1px #a1c3ca;
filter: drop-shadow(2px 0 #a1c3ca) drop-shadow(-2px 0 #a1c3ca);
```

-- 
GitHub Notification of comment by jsnkuhn
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11610#issuecomment-2678432383 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 24 February 2025 13:33:46 UTC