Create rounded corners using css easily

This way is so easy and doesn’t cost time much, but when table has to be resize because some reasons, the table will look terible, it’ll not be rounded corner because of the images can not be resize as table.

I did not like this way before, but sometime, it make me comfortable because simply and easy to do.

2- Using 4 images:

You must have 4 images, and each image, you must add to each TD tag. Table can be resized without broken if you set width and height property for each TD which added image into.

This table contains: 3 rows and 3 columns, it is harder than above one, but it was a good choice for designer and perfect way to make a rounded box, but ……….it was killed by the CSS.
Make a rounded box using CSS

When using CSS to create one rounded corner box, you still need some images as above, but it’ll be easier than using table and the code is simple. It’s can be made with any editor such as Dreamweaver even with … Notepad.

1. Using 2 images and 2 DIV tag:

Now, you can see in the top div, it contains rounded border by one image and the bottom div contains one image rounded border. The code will be:

<div id="top-round">
     <div class="bottom-round">
       Your Container Content Here
  </div>
</div>

So, we need to some css code to make it work. Simple copy this code below into your css stylesheet section.

#top-round {
    width: 960px;
    padding: 0;
    background: #fff url(images/roundedtop.gif) top left no-repeat;
    margin-top: 20;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
}

#bottom-round {
background: transparent url(images/roundedbottom.gif) bottom left no-repeat;
padding: 20px 20px 10px 20px;
margin: 0; 
}

This method is good to use for design container content of web, the width of web page will not resize. If not, it’ll be broken same as Table way above my entry. Honestly, it’s more simple than same way in Table, huh?
2. Using 4 images and 4 div tag:

This method can be understand as below.

There’re 4 border images and we must use 4 div for each image border. See the HTML code and CSS code below to find out how it working.

HTML

<div id="top-left">
  <div id="top-right">
  <div id="bottom-left">
  <div id="bottom-right"> 
  Hello, dont just read and go, comment if you like my entry.
  </div>
  </div>
  </div>
</div>

CSS

div#top-left{background:#e8eef5 url(images/left_top.gif) no-repeat; width:100%;}
div#top-right{background:url(images/right_top.gif) no-repeat top right;}
div#bottom-left{background:url(images/left_bottom.gif) no-repeat left bottom;}
div#bottom-right{background:url(images/right_bottom.gif) no-repeat right bottom; padding:10px;}

And the result is something like this:

3. No using image:
I love this one method, it’s simple, you dont need to add more than one div tag into your web page. Really? now, see how can i do it.

HTML

<div id="outsite">
    <div id="inner">Your content here</div>
</div>

CSS

#outsite {
 height: 300px;
 width: 500px;
 margin: 0 auto;
}

#inner {
        background: #e8eef5;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        padding: 10px; 
}

This method will be awesome if it works in IE ^^. At this moment, i dont know how to make it works in IE, but it still works perfect in Firefox.

There’re so many ways to create round corners box using css but these above are most simple i know. Forget Table now!