CODEWITHSUNDEEP
css
Doua Beri
Doua Beri

Reputation: 10949

CSS border-radius shorthand

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 ?

Upvotes: 2

Views: 2606

Answers (1)

yunzen
yunzen

Reputation: 33439

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

Upvotes: 3

Related Questions