Curry-Man.com

It Just Makes Sense!

CSS Tutorial

Rounded Corners

It used to be that in order to get rounded corners on an element you had to use bullets from an LI or images. Now, however, with CSS3 it is fairly easy to round the corners without cutting corners. Here are the CSS classes that I use to round the corners in this site:

.rounded {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.rounded-bottom-left {
	border-bottom-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bomttomleft: 10px;
}

.rounded-bottom-right {
	border-bottom-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bomttomright: 10px;
}

.rounded-top-left {
	border-top-left-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
}

.rounded-top-right {
	border-top-right-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
}

To round corners with CSS (which works in most newer browsers that support CSS3) you will need to have 3 attributes:

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

Border-radius is the basic style, and is supported by IE 9+ and Opera. -webkit-border-radius is required if you want to support all Webkit browsers such as Chrome and Safari. Firefox support requires the use of the additional -moz-border-radius attribute.

Below are examples of some divs displaying the different implementations of the classes (both single-class and multi-class):