DIV with border-radius but no border


I have a div with border-width: 0px; and border-radius: 5px; (or -moz-border-radius etc.).

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 X-UA-Compatible to 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?

Problem courtesy of: cheeesus


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.

Solution courtesy of: cheeesus


Have you tried using border-top-left-radius, border-top-right-radius etc. for example? I've used something similar before for rounded corners on div's and it worked in IE9/Chrome/FF, not IE8 though.

Discussion courtesy of: lifetimes

This recipe can be found in it's original form on Stack Over Flow.