Matthew P. Tevenan
Programming Writer, Internet Explorer Developer Content
Microsoft Corporation

September 9, 2009

Summary: This article discusses adding rounded corners to a Web page layout and provides links to several techniques to accomplish this in Internet Explorer 8 and earlier.

Contents

Introduction

Rounding the corners of layout boxes remains one of the most popular techniques in Web design today. The number of available techniques to accomplish this has grown considerably from the typical table-layout-and-corner-GIFs solutions of years ago. Furthermore, for the last few years, the World Wide Web Consortium (W3C) has been working on adding enhanced border functionality to the latest revision of the Cascading Style Sheets language, Level 3 (CSS3). As of this writing, it has proposed rounded-corner functionality via the border-radius properties.

Internet Explorer and the border-radius Properties

While the W3C has specified the border-radius properties in its latest CSS3 working draft, Microsoft has not implemented the border-radius properties in Internet Explorer 8.

Microsoft is committed to providing a browser that accurately supports Web standards. In Internet Explorer 8, we shipped several features from HTML5 and CSS3. Our primary goal was implementing CSS 2.1 (a specification that has reached final candidate stage) completely and correctly before moving on to specifications that are still in development and may change.

Other Rounded Corners Solutions

We would like to point out the abundance of alternate solutions available on the Web. In addition to individual rounded corners solutions, there are also sites with frequently updated lists of rounded corners solutions that are compatible with multiple versions of Internet Explorer and other browsers.

Listed here are a few of our favorite sites for aggregated rounded corners solutions. They are presented in no particular order, and the inclusion of any link does not imply endorsement by Microsoft of the site.

• CSS-Discuss Wiki, RoundedCorners: http://css-discuss.incutio.com/?page=RoundedCorners
• SmileyCat, CSS Rounded Corners "Roundup": http://www.smileycat.com/miaow/archives/000044.php
• CSS Juice, 25 Rounded Corners Techniques with CSS: http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
• Bing search, "css rounded corners": http://www.bing.com/search?q=css+rounded+corners
• Digg search, "css rounded corners": http://digg.com/search?s=css+rounded+corners

For the latest information on CSS in Internet Explorer, visit the IE Developer Center and the IE Team Blog.

See Also

• CSS Compatibility and Internet Explorer
• CSS Improvements in Internet Explorer 8
• CSS Backgrounds and Borders Module Level 3
• The "border-radius" properties