- From: Noam Rosenthal via GitHub <noreply@w3.org>
- Date: Mon, 02 Jun 2025 07:58:13 +0000
- To: public-css-archive@w3.org
> I'm not expecting `corner-shape` to cover every possible border design. I'm trying to find _any_ existing variable width border design that _would_ be covered by the provided border implementation and so far unfortunately I haven't had any luck. > > I had high hopes for this next one as it does include the transitioning corners but I couldn't make it work to what i'd call a passable degree. (To be fair the single element implementation _might_ be close enough for some folks). Can get the inner corners to match or the outer corners to match but not both. You can achieve something like this by using a uniform border width and playing with inset shadows. I didn't have time to tweak it to the exact result, but the following can be a starting point: ```css border-width: 11px; box-shadow: #fff 0 0 0 8px, #000 -10px -10px 0 0px inset; ``` The same way non-uniform borders would create an elliptical curve for rounded corners, they would create a non-45deg curve for bevel corners... To keep the 45deg curve in those cases you need to use inset shadows (or multiple elements) instead of non-uniform borders. > > The yellow element decorated with a black background-ed, consistent width white border pseudo panel works well though. > > side note: there seems to be some very slight gaps (one pixel or maybe even less) in some of the corners here. Is this a known issue with the Chromium implementation or should I file a bug? Thanks for trying it out early and reporting! There's already a fix underway for some of these rendering afrtifacts, hope to see it in canary this week. -- GitHub Notification of comment by noamr Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11610#issuecomment-2929300140 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 2 June 2025 07:58:13 UTC