CODEWITHSUNDEEP
htmlcssinternet-explorer-9rounded-corners
Jonas Sourlier
Jonas Sourlier

Reputation: 14455

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?

Upvotes: 2

Views: 1669

Answers (2)

Jonas Sourlier
Jonas Sourlier

Reputation: 14455

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.

Upvotes: 2

dsgriffin
dsgriffin

Reputation: 68616

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.

Upvotes: 1

Related Questions