Rounded corners in CSS (cross browser implementations)

I like using rounded edges but I don’t wan the hassle it entails when implementing it using images. You have to create the graphics, write separate style sheets for different type of corners and add more xHTML tags. A CSS3 solution has been around for sometime but only a hand-full of browsers support it today, thankfully some of the major browsers namely Firefox, Safari, and Chrome support it by just calling a CSS property in your class. Though it is also possible for the effect to work with IE6+ and Opera 9.5+ but a bit of work is needed to achieve the effect, and be somewhat of cross-browser compatible.

Below is the generic class I use to curve certain elements within my designs:

.curved {
	border-radius: 8px; /* CSS3 compliant browsers */
	-moz-border-radius: 8px; /* firefox */
	-webkit-border-radius: 8px; /* Google Chrome, Safari  */
	-khtml-border-radius: 8px; /* Linux Browsers */
	behavior: url("css/border-radius.htc"); /* IE Browsers */
	background-image: url("1px.svg");  /* Opera 9.5+ */
}

Before you go any further, there are significant disadvantages when trying to implement the effect in Opera and Internet Explorer, so use it sparingly.

• On Opera it requires you to set the background to an .SVG file. You’ll also have to set the color of the containing element’s background, border width and color in the SVG file.
• On IE, you’ll be required to call a behavior stored in an HTC file, despite giving you more leeway compared to the SVG implementation, you can’t use it on certain elements like table-cells or floated elements. This will either not render the element properly or destroy the design all together.

You’ll need to use an SVG (Scalable Vector Graphics) file (which basically contains a bit of XML markup) to achieve the effect in opera. you can see the SVG file I used below; Note: you’ll be editing the background color and border color here as well as in your style sheet.

<svg xmlns="http://www.w3.org/2000/svg">

<style type="text/css">
</style>

<mask id="m1">
 <rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="black" stroke-width="2" />
</mask>

<rect stroke="navy" fill="#FFC" stroke-width="4" mask="url(#m1)" width="100%" height="100%" rx="10" ry="10" />

</svg>

For the effect to work on IE6+ you’ll need to use the HTC (HTML Component file) file below.

<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">
function oncontentready(classID) {
 if (!this.className.match(classID)) {
 if (!document.namespaces.v) {
 document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
 }
 this.className = this.className.concat(' ', classID);
 var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
 this.currentStyle['moz-border-radius'] ||
 this.currentStyle['border-radius']) /
 Math.min(this.offsetWidth, this.offsetHeight), 1);
 var strokeColor = this.currentStyle.borderColor; var strokeWeight = this.currentStyle.borderWidth; this.style.border = 'none';
 var fillColor = this.currentStyle.backgroundColor; var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); this.style.background = 'transparent';
 var margin = this.currentStyle.margin; this.style.margin = '0';
 var styleFloat = this.currentStyle.styleFloat; this.style.styleFloat = 'none';
 var clear = this.currentStyle.clear; this.style.clear = 'none';
 var position = this.currentStyle.position; this.style.position = 'static';
 var left = this.currentStyle.left; this.style.left = '0';
 var right = this.currentStyle.right; this.style.right = '0';
 var top = this.currentStyle.top; this.style.top = '0';
 var bottom = this.currentStyle.bottom; this.style.bottom = '0';
 var width = this.currentStyle.width; this.style.width = '100%';
 var height = this.currentStyle.height; this.style.height = '100%';
 this.outerHTML = '<div style="background: transparent; border: none; padding: 0; margin: ' + margin + '; float: ' + styleFloat + '; clear: ' + clear + '; position: ' + position + '; left: ' + left + '; right: ' + right + '; top: ' + top + '; bottom: ' + bottom + '; width: ' + width + '; height: ' + height + ';"><v:roundrect arcsize="' + arcSize + '" strokecolor="' + strokeColor + '" strokeweight="' + strokeWeight + '" style="behavior: url(#default#VML); display: inline-block; width: 99%; height: 99%; antialias: true; padding: ' + strokeWeight + 'px;"><v:fill color="' + fillColor + '" src="' + fillSrc + '" type="tile" style="behavior: url(#default#VML);" />' + this.outerHTML + '</v:roundrect></div>';
 }
}
</script>

Tagged as: code, css, web