4 Ways to Get Rounded Corners Using CSS

Rounded corners are a common CSS effect these days. There are several ways to accomplish this effect, and how you go about implementing rounded corners will depend largely on what purpose they will serve in your design. Keep this in mind, because it can save you hours of unnecessary work. In certain cases, rounded corners can be accomplished very easily, and in others they may be the single most challenging part of the design. This article will attempt to point you directly to the solution you need.

1. Can you use CSS3?

CSS3 border radius is by far the easiest implementation of rounded corners, but it doesn’t work in Internet Explorer. If your layout will be exclusively viewed through Firefox or Safari/Chrome, you’re safe using this technique. Likewise, if rounded corners are a “nice-to-have” feature and not an essential part of the layout, you can use CSS3 border radius with the browsers that support it and not worry about browsers that don’t. Each rendering engine that supports CSS3 border radius has its own implementation of it. In Firefox and other Gecko-derived browsers, you’ll have to use the -moz-border-radius property. In Safari, Chrome, and other Webkit-derived browsers, you’ll have to use -webkit-border-radius. A typical cross-browser border radius declaration looks something like this:

/* 5 px rounded corners on all sides */
-moz-border-radius:5px;
-webkit-border-radius:5px;
/* 5 px rounded corners on only the top sides (top left and top right) */
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;

If you’re going to go all the way with CSS3, combining rounded corners with border images and border styles will allow you to accomplish very complex effects. However, most designers will have to provide full cross-browser compatibility.

2. Can you use JavaScript?

JavaScript succeeds where CSS3 support fails. There are literally dozens of implementations of rounded corners using JavaScript. The question again is whether or not rounded corners are essential to the design, because it’s likely that some users will have JavaScript deliberately disabled. The trade-off is between speed of development and universality. You will save a lot of time using a JS-based solution, but you won’t cover all possible cases. Here’s a list of the best JavaScript-based rounded corners toolkits:

• Nifty Corners Cube
• ShadedBorder
• CurvyCorners
• Sweet Rounded Corners
• DomCorners

Keep in mind that each JS implementation is different and will have its own idiosyncrasies. Though JS makes it easier to get cross-browser rounded corners, the effect may sometimes look different across browsers. Mobile browsers, like Safari on the iPhone, can sometimes render JS-powered rounded corners in undesirable ways.

3. Do you have at least one fixed dimension?

In almost all cases where rounded corners are used, they’re used in ways that don’t require the container to resize in two dimensions. Apple’s site is a prime example of this, where very large images are used in place of clever CSS hacks. If you don’t need the container to resize horizontally, vertically, or both, then you’ve reduced the steps needed to accomplish the desired effect. If you won’t need to modify both width and height, then one image, preferably a transparent GIF, can be used as the background of your container. If you will need to modify one dimension, chances are you’ll need to modify height and leave width alone. In this case, you’ll need to just use 2-3 images, two for the bookends of the container (the rounded top and bottom images with the exact width of the container and an optional image to use as the content background in case you’re using a custom border). If you need to modify width, but keep height constant, a similar (but slightly more complex) structure will be required. You’ll need to float the bookends and the content to the left.

4. Can’t cut corners?

The final and most time-consuming option is to create four corner elements. There are two main approaches to this solution: 4 absolute-positioned elements or two bookends with the opposite element contained in each bookend. How the image is sliced is mostly irrelevant. There are approaches that use sprites and there is the more traditional way of slicing up a picture of a circle and distributing the various elements to their proper location.

Conclusion

When a client asks for rounded corners, you need to ask several questions: is this an essential element, does the container need to be resized, and can IE be ignored? Normally, rounded corners will be requested on page containers or small elements like menus, but sometimes a client may request an entire site to have rounded corners everywhere. It pays, then, to find where you can save time and effort by optimizing for common cases and not for every possible case.