David Walsh Blog

CSS Rounded Corners

The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.  CSS rounded corners thus save us time in creating images and requests to the server.  Today, rounded corners with CSS are supported by all of the major browsers:  Safari, Chrome, Internet Explorer, Opera, and Firefox.  Let’s look at border-radius syntax, caveats, and Internet Explorer support.

Syntax and Standards

The CSS3 standard property for applying rounded corners is border-radius.  This property is added to elements just as naturally as width or positional properties are:


.roundElement	{
	border-radius: 10px;
}

The preceding statement assigns one rounded corner value to each of the element’s four corners.  A specific border radius may also be added to each to elements individually:


.pearElement	{
	border-top-left-radius: 7px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 8px;
}

A shorthand border-radius syntax is also available where application:


.oddRoundElement {
	border-radius: 12px 5px 12px 5px;
	/* or */
	border-radius: 12px 5px;
}
	

The pattern details top-left, top-right, bottom-right, bottom-left.

Browser Support and Prefixes

Since rounded corner elements and border-radius were not a set standard, each browser implemented their own prefixed {prefix}-border-radius implementation.  Those prefixes look like:


-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;

/* firefox's individual border radius properties */
-moz-border-radius-topleft:15px; /* top left corner */
-moz-border-radius-topright:50px; /* top right corner */
-moz-border-radius-bottomleft:15px; /* bottom left corner */
-moz-border-radius-bottomright:50px; /* bottom right corner */
-moz-border-radius:10px 15px 15px 10px;  /* shorthand topleft topright bottomright bottomleft */

/* webkit's individual border radius properties */
-webkit-border-top-left-radius:15px; /* top left corner */
-webkit-border-top-right-radius:50px; /* top right corner */
-webkit-border-bottom-left-radius:15px; /* bottom left corner */
-webkit-border-bottom-right-radius:50px; /* bottom right corner */

Essentially you would need to make a separate declaration for each browser.  Adding the same rule for different browsers is annoying so adoption of the standard border-radius is important.

Internet Explorer Support

Internet Explorer did not support border-radius until IE9, much to the frustration of developer and designers. With IE9, the important steps are using the edge META tag and provide the border radius:


<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

While many solutions have been presented, I’ve found the best to be a small JavaScript-powered solution called CurvyCorners.  CurvyCorners uses a series of JavaScript-generated DIVs to draw rounded corners, event supporting anti-aliasing.

Using CurvyCorners is quite simple.  The first step is adding the CurvyCorners.js file to the page:


<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js"></script>

CurvyCorners detects the presence of border-radius on DOM elements and works its magic to duplicate the effect in IE. There are no images involved. You may also identify specific elements to apply rounded corners to:


var settings = {
	tl: { radius: 12 },
	tr: { radius: 12 },
	bl: { radius: 12 },
	br: { radius: 12 },
	antiAlias: true
};
/* moooo */
$$('.round').each(function(rd) {
  curvyCorners(settings,rd);
});

I highly recommend specifying elements to add rounded corners to, as checking the entire page is a taxing process;  remember that the rounding occurs on every single page load.

Rounded corners may be achieved with CSS’ border-radius property in Internet Explorer, Firefox, Safari, Chrome, and Opera.  This small feature opens a new realm of possibilities in bridging design and code.  Now that browser support is abundant and browsers are beginning to use a standard border-radius property name, there are really no drawbacks to relying on CSS for your rounded corners.