Ditching the corner images

Sun 8/Nov/2009

CSS CSS3 How-to Web Design

Back to Journal

Tags

Art CGI CSS CSS3 Graphic Design How-to Illustration Infographics Motion Music Opinion Photography Site Social Typography Web Design

Date

Jul/10 May/10 Apr/10 Feb/10 Jan/10

Nov/09 Oct/09

In times of modern web technologies there are still a few ways of doing things that seem hopelessly old-fashioned. One of these is how we accomplish round corners.

The problem

The problem we’re facing is that CSS (or more correctly, the support for it in major browsers) has only given us means to design in right angles. Leaving us with the only option to create images for each corner we want to become rounded (provided we want flexible height and/or witdh). The drawbacks of this are several: more requests to the server, many times additional mark-up (Javascript solutions aside), and increased download times. To name a few.

The solution

With CSS3 on the horizon, and major browsers’ increasing support for it, we see the dawn of a proper solution to the problem – border-radius. Border-radius is a CSS3 property defining the radius of any or all corners of an object. The browsers supporting it are at this point the Gecko and Webkit based ones, in other words Firefox, Chrome and Safari (that’s right, that includes iPhone as well).

The way of making it happen is dead easy, even though the syntax for it differs a little between the two engines. Gecko prefixes it with -moz and Webkit with, surprise, -webkit. On a stranger note, Mozilla has decided not to follow the W3C syntax, but instead flip the words creating their very own definition (this will obviously change once fully supported though).

To set all four corners (and shorthand):

-moz-border-radius
-webkit-border-radius

To set any specific corner:

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

Example

To exemplify the use we’re going to create a simple action button. We start off with the HTML, a simple anchor:

<a href="#">Get started!</a>

To get that button-like feeling we first create a nice 10x30px gradient in Photoshop, to use as background image. And then add a subtle border and some basic styling along with our round corner definitions:

a {
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    background: url(action-bg.png) top left repeat-x #9600ff;
    border: 1px solid;
    border-color: #d499ff #590099 #590099 #d499ff;
    color: #3c0066;
    display: inline-block;
    font: 20px/39px Arial, Helvetica, sans-serif;
    height: 40px;
    padding: 0 40px;
    text-decoration: none;
}

And voila, a nice action link. Notice how the rounding affects the border as well as the background image.

Note: While border-radius affects all properties of an element, any and all children stay unaffected. In other words, if you want the contained elements (an image for instance) not to stretch outside the rounding, you have to apply border-radius to these as well.

What about Internet Explorer?

This of course will not work in Internet Explorer. You basically have two choices here. Either you leave it as is, resulting in no roundness for IE users (which in some cases you actually might be ok with). Or else, you add the necessary images and CSS for making it work in your IE specific stylesheet. Either way, you have optimized speed and flexibility for at least a good part of your users. Not to mention for yourself.

Further reading

Muddled Ramblings has a very extensive compatibility table showing different browsers' support for and implementation of the border-radius property.

Comments

Add comment

All HTML will be escaped. URLs are set to nofollow.

Name E-mail URL Comment