Creating rounded corners with CSS

tagged with

It wasn't too long ago when the only real way to get nice, rounded corners onto a webpage was through the use of images. This is ridiculous if you think about it because it should be very easy for a browser to render rounded corners itself. Today, all good browsers come with a built-in ability to control the look and feel of corners.

Before we begin its worth noting that good web design avoids making use of tables (unless you are actually presenting a table) and instead uses the far more powerful and dynamic <div> tags. If you want to follow along here, make sure your HTML is DIV based first.

If you are unable to view rounded corners in your browser, refer back to the first paragraph. It is recommended you make use of the Firefox, Chrome or Safari browsers in order to follow along with this demonstration.

Let's start by looking at a standard CSS class that specifies a thin border, some padding and a shaded background:

.normal-css-class{

border: 1px solid #888;

background: #bbb;

}

This class, wrapped around some text look like this:

Looks a bit like a button, don't it?

But, let's say that we wanted to give it a bit of flair. If the user hovers over the "button", the background changes color and the border becomes rounded at the top right corner. To accomplish this, we use the following CSS:

.normal-css-class:hover{

background: #e7e7e7;

border-radius: 0 7px 0 0;

}

Now, if you hover over the button, you should notice the change in background color accompanied by the rounded corner, like so:

Hover over for the corner change

Of course, its just as easy to make all the corners of a div rounded in one go by dropping the location specifications (i.e. topright) from the declarations. In which case, a purely rounded div would have a class declaration like this:

.purely-rounded{

border: 1px solid #888;

background: #e7e7e7;

border-radius: 7px;
}

and would look like this as a result:

I got me some smooth curves

That's how easy it is. Remember that in order to make use of this, your website needs to be based on good underlying HTML development. Many older or poor quality websites use tables for layout instead of <div> tags. If this is the case, consider upgrading or moving to a quality platform such as Drupal or a SME Pals distribution.