Forward slash / in CSS border radius syntax

Question

Recently I came across following border radius syntax unknown to me:

.myClass{
    border-radius: 30% / 20%;
}

Can anyone explain the syntax. And is it compatible with IE8?

Answer 1

From W3C :

If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.

As far as the support goes, IE8 doesn't support border-radius property be it whatever syntax you write in. There are polyfills available like CSS3 Pie if you want to make border-radius work on IE8.

You can check on CanIUse for border-radius support across browsers.