Hopefully, your job does not have to support corporate customers whose IT departments do not keep the companies browsers up-to-date, and therefore do not need to support older version of IE. If however, like me, you need to support older IEs, then your companies designers have probably asked you to support rounded corners in IE.
The three most common techniques to solve rounded corners are to use JavaScript [1] or an HTC Access[2] file to produce VML (Vector Markup Language[5]) on demand, or a JavaScript solution that inserts positioned divs to emulate rounded corners[3]. However, all these solutions are slow (search the DOM for rounded elements on load or round on demand), kinda hacky, and require recalculations as rounded elements are repositioned.
The core of the first two strategies is to dynamically inject VML into the document using scripts, but there is no reason you have to use scripts to do this. You can render the VML directly into your HTML and ship the rounded corners with the HTML. This allows the browser to render the rounded corners in the page flow as the page is parsed for a faster page loads and proper document flow. Today’s article will describe how to included rounded corners directly in your HTML for support in IE and all other browsers and is based on work originally done by Jonathan Snook[4].
How do it…
Enable VML on the body of your page (namespaced as v):
<body> <xml:namespace implementation="#default#VML" ns="urn:schemas-microsoft-com:vml" prefix="v"> <!-- page body will go here --> <xml:namespace> </body>
Use the rounded rectangle VML tag to create a rounded rectangle:
<v:roundrect arcsize=".04" fillcolor="#000"> Lorem ipsum dolor sit amet, consectetuer adipiscing </v:roundrect>
Enable the VML via CSS for IE and other browsers:
v\:roundrect {
color: #FFF;
display: block;
background-color: #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 20px;
height: 100%;
/* IE-specific */
behavior: url(#default#VML);
/background-color: transparent;
}
Unfortunately, this doesn’t work in IE 8 standards mode, so we have to degrade IE 8 to behave like IE 7:
<!--[if IE 8]> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <![endif]-->
How it works…
For starters we are using xml to pull in the VML[5] implementation, which this example wraps around the whole body, so that roundrect can be used anywhere on the page. However, you need only wrap parts of the page that contain roundrect elements. The rounded rectangle (roundrect) VML element has a number of properties, including the arcsize and fillcolor used here. The arcsize controls the size of the arc on the corners and is unfortunately relative to the box size. The fillcolor controls the background color of the element and cannot be controlled via CSS in IE <9.
This means that you need to duplicate the background-color defined in the CSS as the fillcolor attribute for older IEs. And you define border-radius in the CSS for modern browsers, but the arcsize attribute in VML for older IEs. This duplication is unfortunate, and it breaks the separation of design and layout rule, but is a necessary evil of this solution.
We have defined some CSS informing modern browsers to render the unknown v:roundrect element as as block element with rounded corners. The later part of the CSS declaration tells IE to use the default VML behavior for rendering (as defined by microsoft). Modern browsers will treat the v:roundrect element as other elements, so you can apply additional attributes like id, class, and data- for further control.
Out of the box, the VML solution works great in IE 6 and 7, but Microsoft changes the VML implementation in IE 8, so it breaks in standards mode. To work around this, we tell IE 8 to render as IE7 using the X-UA-Compatible meta tag. Most enterprise companies are already doing this, so they do not have to maintain different CSS for IE 7 and 8.
In summary, the pros of this solution is that you hve rounded corners in IE 6-8 that render with the page like other elements and need no special scripts for activating. The drawback is you need to duplicate some design in the markup and render IE 8 as IE 7. Overall, I would recommend gracefully degraded to non-rounded corners in older IEs, as this is not a perfect solution, but if you must support rounded corners, consider putting the VML directly into your markup, instead of relying on a script.