问题
I used to write rounded corners using CSS3 for google Chrome and Safari like this:
-webkit-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-right-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
And for FireFox:
-moz-border-radius: 5px 5px 5px 5px;
How to write it for IE9?
回答1:
No vendor prefix needed (this is also supported by Opera):
border-radius: 5px;
And you can condense your WebKit- and Mozilla-specific styles to these respectively:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
As a matter of fact, soon enough you won't need these two properties anymore as the standard border-radius is now supported by Safari 5+ and Firefox 4+.
回答2:
border-radius: 5px 5px 5px 5px;
回答3:
The <!DOCTYPE html> element is the key for rounded-corners in IE9
Also see: HTML DOCTYPE Declaration
来源：https://stackoverflow.com/questions/5427276/how-to-write-css3-rounded-corners-for-ie9