CSS Rounded Corner Tutorial – Create Rounded Corners Without Images

CSS Rounded Corner TutorialIf 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.

Comments

  1. Nike air force says

    I totally agree the standpoint of upstairs, and I believe this will be a trend. I often come this forum , rom here I learn much and know the newest tide! the content here constantly update shoe and I love it! Another I know some websites which often update their contents, you guys should browse if you are free. htttp://www.scarf8.net

  2. says

    Yep, me too, oh and coupon sites. Those things are built to work with IE (STOOOOPID!) and most of them won't print if I'm viewing from Firefox. Grrrr.

    IE is of the devil…

  3. Dayanand says

    Hi,

    Article on rounded corner tutorial is good and it is beneficial to the reader as well as Website professional .

    Deep from :www.e.profitbooster.com

    Our Services :

    • Website Designing
    • Web Development
    • PHP Development

  4. Charlotte says

    I found this tutorial of great use to me & very simple to follow. Thanks! However, I am unsure on how to make the boxes width all the same. I have tried #width in css but this hasn’t changed anything for me. Any suggestions?

    • Erica says

      The width should be specified under the div ID. So, if you’re working on the #nav box, it would look like this:
      #navigation {
      width:960px;
      margin: 4px;
      }

      If you’re trying to style block quotes it might look like:

      #blockquote {
      width:460px;
      margin: 4px;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge