I have a div with
border-width: 0px; and
border-radius: 5px; (or
In Chrome, Safari and Firefox this works very well, the div gets rounded corners, so it is transparent in the corners.
IE9 however, does not display the rounded corners (I checked, IE is really in "IE9 mode", I have a HTML5 doctype and set
IE=edge). It only does if I add
border-style: solid; border-width: 1px;
Can I get IE9 to render rounded corners without declaring an actual border?
The problem was that the div was filled with a gradient. Since IE9 does not support CSS gradients, I had to use
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#79D5FF', endColorstr='#08609A');
and this does not work with rounded corners, i.e.,
border-radius does not cut off the corners of the gradient.
This recipe can be found in it's original form on Stack Over Flow.