CSS Rounded Corner Tutorial – Create Rounded Corners Without Images

If you like to play with your own websites and you’re looking for a way to create rounded corners on your boxes, navigation bars, etc here’s a css rounded corner tutorial.

Why Rounded Corners Using CSS?

The more images we eliminate from our site designs, the faster our sites will load. Until css offered us the ability to create rounded corners we used individual images to create rounded boxes and buttons for our blogs. While some rounded corner css tutorials still use images* they only use one tiny corner image and they specify placement/rotation to make all four corners, filling the rest of the area with the same color. This allows a box to grow with it’s content. I love css rounded corners for site navigation because no matter the page title, the button will the right size.

How to Make CSS Rounded Corners

First, find the area or your css file you’d like to add rounded corners to. If it’s your navigation bar the area of css may look something like this:

#navigation  {
width:960px;
margin: 4px;
}
.header-fixed #navigation {
padding: 10px;
border-bottom:1px solid #fff;
}
body.header-fluid div#navigation, body.header-fixed div#navigation {
background-color:#65443D;
border-bottom-color:#EEEEEE;
}

(Nav CSS in Headway Theme)

If you want the box within a post, like the one below, you can modify some h-tags or your blockquote styles like this:

This css was added to my h5 style to create the box you see above.

background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;

This is an example of a box with rounded corners using css. Notice the border is a different color than the box. This can easily be changed in the css.

All you have to do is change the border color to match the background color and you’ll have a solid box or button created with css using rounded corners. Here’s the code I’ve used so all I have to do to get these rounded corners is apply the Heading 6 (h6) tag to my content:

.posts .post h6 {
font-family:Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
background-color: #47ADA8;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #47ADA8;
padding: 10px;

}

Just in case my tutorial wasn’t clear enough, here’s where I learned to make rounded corners using css.

*Please note that Internet Explorer doesn’t play nice with rounded corners using css. If you’d like rounded corners to show in IE you’ll need to use images for the corners. Here’s a tutorial on creating rounded corners with css and images.