Rounded Corners using CSS

Rounded Corners using CSS

Ever since web pages came into being, designers have wanted to add more and more style into their creations, one of the most important being rounded corners.

Rounded corners using images

At first, this was achieved by using huge images to represent the buttons, forms or any other element.

Later, the huge images were cut into smaller ones to represent the corners, positioned perfectly using CSS (see image on the right).

The HTML 5 spec makes it simpler than ever to create rounded corners, forgoing the need for images altogether and saving us from the horrors of funky CSS.

One can now simply add the border-radius property to any element to achieve the same effect. Here we have a simple span with the following attributes:

Simple Border

margin: 20px;
padding: 4px 10px;
border: 1px solid black;
background-color: #ffff00;

Simply adding border-radius: 6px; turns it into:

Rounded Border

margin: 20px;
padding: 4px 10px;
border: 1px solid black;
border-radius: 6px;
background-color: #ffff00;

That’s all there is to it. Almost makes it seem like a scam after the horrors we have been through in the past.

Let’s use it to create the featured image at the top that was originally created using a photo-editor. We’ll do it using spans:

Span 1

width: 182px;
height: 182px;
background:-webkit-linear-gradient(#ccc, #444);
background:-moz-linear-gradient(#ccc, #444);
background:-o-linear-gradient(#ccc, #444);
border-top:4px solid #888;
border-left:4px solid #888;

Span 2 (embedded inside Span 1)

width: 140px;
height: 140px;
border:1px solid #bb0000;

Close enough. Now how about using this to improve your buttons?

Note: -moz-border-radius has to be added to make it compatible with Mozilla browsers. However, as of Firefox 4, just border-radius is supported.

Leave a Reply