Webvanta Blog: Creating Effective Websites

Creating Rounded Corners with CSS3

Creating Rounded Corners with CSS3 Image

In the early days of CSS-based design, square corners were a hallmark of designs that focused on simplicity of code, rather than visual aesthetics. Using images and occasionally JavaScript, many designers moved to rounded corners, which were emblematic of ‘Web 2.0’ designs.

Rounded corners remained somewhat painful to use, however, until the emergence of support for creating them using the border-radius property of CSS3. Now it takes only a few lines of simple CSS code to have nicely rounded corners—as long as you can accept that many users will see square corners until they move on to more modern browsers.

The CSS3 property border-radius is the most commonly used part of CSS3, as of this writing (late 2010), because of its broad applicability and widespread browser support (at least compared with other CSS3 properties).

Note: If you are viewing this page with any version of Internet Explorer prior to IE9, or if you are using an older version of Safari, Firefox, or Chrome, the gray areas to the right of the code examples below will have square corners. If you use a modern browser, they will have rounded corners.

You can see other examples of rounded corners in the template for this page. The ‘Free eBook’ button has rounded corners in all browsers, because it is an image. The ‘Try Webvanta for Free’ button below it, on the other hand, is created entirely with HTML and CSS, and it will be square in browsers that don’t support border-radius.

Creating Rounded Corners with CSS

As with so many leading-edge HTML and CSS features, the code for border-radius starts out being a model of simplicity and clarity:

#rounded-region {border-radius: 15px; 

The code above applies a 15-pixel radius to all corners of the element with the ID of rounded-region.

The use of border-radius can, of course, become a lot more complex. Take a look through the official specification for border-radius if you want all the details.

You can, for example, apply a different radius to each corner. This example has slightly rounded corners at the top and very rounded corners at the bottom:

#rounded-region {border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px

There’s a shorthand form, similar to that for other CSS properties such as margin and padding, that gives the values for all four corners in one line of code, starting at the top left and going clockwise:

#rounded-region {border-radius: 5px 20px 40px 60px;

If you want to go all out, you can separately specify the vertical and horizontal radius for each corner, resulting in 8 values to describe the corners of a rectange, but we’ll skip that in this quick introduction.

There’s a variety of online interactive code generators, such as border-radius.com, that make it easy to play with different values and see the results and the code to use.

Vendor Prefixes

Border-radius was one of the first properties to be widely implement using browser-specific vendor prefixes. These prefixes are not hacks but are an officially sanctioned way for browser makers to implement fetures before the specs are ready.

With Safari 5 and later and Chrome 5 and later, the webkit prefix is not needed. Since users of those browsers tend to upgrade relatively promptly, it’s not an unreasonable choice to stop using the webkit prefix and just let users of older version of Safari share the squared-off version of the page with Internet Explorer users.

Firefox will not support border-radius without the moz prefix until 4.0, however, so you’ll probably want to include it in your code for a while longer.

To support both vendor prefixes, you need three lines for every statement. In a simple case, you might use:

#rounded-region {-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;

But if you are specifying corners individually, this can balloon into many lines of code. If you go down this route, pay careful attention to the syntax; the moz version of the property uses slightly different names for the corners. There are also issues with older versions of various browsers not supporting the shorthand versions, with multiple corners specified on one line.

What About Internet Explorer?

Using border-radius is a lot faster and more satisfying than assembling rectangles from sets of corner images and border sections. But it does have one issue: Internet Explorer.

The dismal truth is that the majority of web users today—those who use IE—won’t see your nice rounded corners. No version of IE prior to IE9 supports them at all.

Nevertheless, for many web designers (and many site owners) it is just not worth the additional time and expense to build rounded corners the old-fashioned way for the sake of IE users. If you have the time and budget, go ahead and create an IE version that uses images for the corners. But if you’re squeezing the job to fit in a limited budget, your time is probably better spent elsewhere.

If rounded corners are essential to your design, rather than an embellishment, then you’ll probably want to use images for corners for a couple more years. But for the vast majority of cases where the site is perfectly functional with square corners, using CSS border-radius is a reasonable solution that only becomes more compelling with time. Over the course of the next few years, with the rollout of IE9 and the disappearance of older versions of other browsers, more and more people will get to enjoy the curves in your designs.

As for those die-hard IE users who don’t move up to IE9 in 2011: there is a certain poetic justice in them getting a square version of everything.

Topics: HTML5 and CSS3

Add Your Comments

(not published)