18 replies

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;
}

KP-C

Kevin Powell - Community•6mo ago•

18 replies

capt_uhu

One corner, two border radii

.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;
}

One corner, two border radii

Similar Threads

One corner, two border radii

Similar Threads

Similar Threads

Similar Threads