Kevin Powell - Community•2mo ago

One corner, two border radii

Kevin just put up a tip o the week article on 2 value border radii: https://html-css-tip-of-the-week.netlify.app/tip/mutliple-corner-radii/ One of the examples says that you can use slashes in the individual radius long-hands. It seems like this should work but it comes back as invalid for me in devtools. Am I missing something? https://codepen.io/jsnkuhn/pen/jEWbeMv?editors=1100

.strange-shape {
  border-radius: 50px 120px 75px 10px / 100px 10% 30px 100px;
  
  /* same as */
  border-top-left-radius: 50px / 100px;
  border-top-right-radius: 120px / 10%;
  border-bottom-right-radius: 75px / 30px;
  border-bottom-left-radius: 10px / 100px;
}

.strange-shape {
  border-radius: 50px 120px 75px 10px / 100px 10% 30px 100px;
  
  /* same as */
  border-top-left-radius: 50px / 100px;
  border-top-right-radius: 120px / 10%;
  border-bottom-right-radius: 75px / 30px;
  border-bottom-left-radius: 10px / 100px;
}

14 Replies

Chris Bolson•2mo ago

You don't add the slash when defining them like that. ah, you already know that from your codepen (just opened it) I suspect that @Kevin Powell has made a mistake in that article 🤔

capt_uhuOP•2mo ago

yeah, i'm not sure I understand why it couldn't be made to work though? I can't think of a reason why the working group would have specifically said "no you can't do it that way." Because it seems like a reasonable thing to expect to work.

Kevin Powell•2mo ago

oops, yup, going to fix that also, yeah it's interesting that for the shorthand, you use the / but you don't for the shorthand... honestly, the shorthand is a mess imo. The values for each corner should be together somehow.

capt_uhuOP•2mo ago

yeah seems like the most obvious alternative to the shorthand would be width height pairs like with background-size. So instead of:

border-radius: 50px 120px 75px 10px / 100px 10% 30px 100px;

border-radius: 50px 120px 75px 10px / 100px 10% 30px 100px;

we'd have:

corner-size????: 50px 100px, 120px 10%, 75px 30px, 10px 100px;

corner-size????: 50px 100px, 120px 10%, 75px 30px, 10px 100px;

Kevin Powell•2mo ago

yeah, that would have been a lot better.

capt_uhuOP•2mo ago

so... while I was going back and forth with the WG about corner-shape i brought up the idea of a corner-size property to pair with corner-shape so that we wouldn't have a forced round fallback like we have with border-radius. At the time the answer was that having 2 properties that were the same excepts for a different default value wasn't worth it. I wonder if this change would be enough to make it more worth while?

Kevin Powell•2mo ago

My only thought is this is a pretty niche use case... though I do wonder if having the different radii becomes more useful with corner-shape

capt_uhuOP•2mo ago

for the default round corner-shape yeah it's pretty niche but for bevel in particular the multi value thing is likely to get used a lot more

capt_uhuOP•2mo ago

so this is worth a try the worst they can say is "no": [css-backgrounds] allow optional forward slash in border-*-radius long hands https://github.com/w3c/csswg-drafts/issues/12861

GitHub

[css-backgrounds] allow optional forward slash in border-*-radius...

The border-radius shorthand uses a slash to separate corner widths and heights: border-radius: 2em 1em 4em / 0.5em 3em; However the slash is not used in the individual border-*-radius long hands. I...

curiousmissfox•2mo ago

Has the article been fixed ? Speaking of confusing this rxqmple from mdn is melting my brain 😵‍💫

border-radius: 4px 3px 6px / 2px 4px;

/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

border-radius: 4px 3px 6px / 2px 4px;

/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

capt_uhuOP•2mo ago

yep the article is fixed. and yeah the css 1-4 value shorthand thing is probably why the slash syntax was chosen over width-height pairs. Can be much less to write: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Shorthand_properties#ordering_properties (don't know why we can't link directly to the "corners of a box" heading)

Kevin Powell•2mo ago

and yeah the css 1-4 value shorthand thing is probably why the slash syntax was chosen

I'd have much prefered

border-radius: 4px 10px, 10px, 10px, 20px 50px;

border-radius: 4px 10px, 10px, 10px, 20px 50px;

🤷 but also, commas aren't part of the regular spec, right? so maybe that played into it as well. And border-radius: 4px / 10px 10px 10px 20px / 50px or something would be confusing.

capt_uhuOP•2mo ago

I guess it's situational. i can definitely see times when the current slash syntax short hand would be superior to width height pairs. Something like:

border-radius: 20px 0 / 10px;

border-radius: 20px 0 / 10px;

instead of having to write:

border-radius: 20px 10px, 0 10px, 20px 10px, 0 10px;

border-radius: 20px 10px, 0 10px, 20px 10px, 0 10px;

although you could argue that while the width high pairs are obviously longer it's probably clearer what's going on. The background shorthand has the same issues. You really have to put some time in to both to understand what's going on.

capt_uhuOP•2w ago

Follow up time. The working group discussed the issue I opened as a result of this thread at TPAC 2025 and resolved to add the optional slash to the spec. https://github.com/w3c/csswg-drafts/issues/12861#issuecomment-3525806102

RESOLVED: Allow forward slash in these properties

GitHub

[css-backgrounds] allow optional forward slash in border-*-radius...

Gaming

Programming

One corner, two border radii

Did you find this page helpful?