Create Beautiful Rounded Corners using Border-Radius

How many times have you been working on a new website layout and wanted to use rounded corners on your design elements but hesitated because you knew the hastle just wasn’t going to be worth it? I know, the whole process used to be such a pain, creating the corner images, using multiple nested divs to attach the images, writing the accompanying CSS and then putting your content inside… Not any more!

Now using rounded corners is super easy and can be done completely with CSS3. Most of you are probably already familiar with the CSS3 border-radius property but some of you may not be so this little demo will help you understand the border-radius property and hopefully have you using it in your designs right away.

Here is a simple example:

This element should have equally rounded corners on all four sides

Here’s the CSS that makes it work:

.rounded-corners {
	background-color:#CCC;
	-webkit-border-radius: 8px; /* Chrome, Safari support */
	-moz-border-radius: 8px; /* Firefox */
	border-radius: 8px;
	margin-bottom:10px;
	padding: 5px;
}

As you can see we add two properties for specific browser support. The -webkit- prefix targets and adds support for Google Chrome and Apple Safari. The -moz- prefix targets and adds support for FireFox.

Join The Conversation

All comments are moderated.

* Denotes required field.

*