DIV with border-radius but no border

2
votes

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?

2
htmlcssinternet-explorer-9rounded-corners
I don't have IE to experiment with, but have you tried overflow: hidden;? – David Thomas

2 Answers

2
votes

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.

1
votes

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.