CSS border-radius shorthand

Question

I have this css code:

border-radius: 50%/15px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

I'm trying to write the code in a single border-radius property, but without any luck. Is it possible ?

Answer 1

It should be border-radius: 10px 10px 50% 50% / 10px 10px 15px 15px;

See https://developer.mozilla.org/de/docs/Web/CSS/border-radius

 #shorthand { border-radius: 10px 10px 50% 50% / 10px 10px 15px 15px; /* It's follwing order 1 2 3 4 / 5 6 7 8 1: horizontal top left 2: horizontal top right 3: horizontal bottom right 4: horizontal bottom left 5: vertical top left 6: vertical top right 7: vertical bottom right 8: vertical bottom left That means starting from top left clockwise, before the slash horizontal and after the slash vertical */ } #original, #shorthand { border-color: silver; border-width: 1px; width: 161px; height: 100px; background-color: goldenrod; margin: 20px; float: left; display: flex; align-items: center; justify-content: center; } #original { border-radius: 50%/15px; border-top-left-radius: 10px; border-top-right-radius: 10px; } 

 <div id="original">Original</div> <div id="shorthand">Shorthand</div> 

You can look here for an example: https://codepen.io/HerrSerker/pen/BGJyKv?editors=0100