Rounded corner using CSS, Rounded corner DIV, Rounded Box, rounded corners in ie, rounded corner css with images, Simple Rounded corner CSS

Using rounded corners in design layout is most attractive feature of website. Every Site using rounded corner to make its design beautiful.

Basic designers use fixed width image to create the rounded corners.

Instead of using big images to make Rounded corners we can use CSS and tiny images for making round corners.

It helps to make low weight website. So it download fast on client server.

rounded corners using CSS 2.0

<div style="position: relative; padding: 7px 0px; width: 600px; margin: auto; background: #364957;">
        <img style="position: absolute; top: 0px; left: 0px; height: 11px;" src="../images/top_g.jpg" />
        <img style="position: absolute; top: 0px; right: 0px;" src="../images/top_g1.jpg" />
        <table width="100%;" cellspacing="0" cellpadding="0">
            <tbody>
                <tr style="color: White;">
                    <td style="text-align: center;">
                        hello
                        <br />
                        how are you
                    </td>
                </tr>
            </tbody>
        </table>
        <img style="position: absolute; bottom: 0px; left: 0px; height: 11px;" src="../images/top_gb.jpg" />
        <img style="position: absolute; bottom: 0px; right: 0px;" src="../images/top_gb1.jpg" />
    </div>

Rounded Corner using CSS 3.0

how arwe you dear


Its a test Rounded corners

but it uses CSS3

<style>
        .css3
        {
            -moz-border-radius-topleft: 10px;
            -moz-border-radius-topright: 20px;
            -moz-border-radius-bottomright: 30px;
            -moz-border-radius-bottomleft: 0;
            background: #eee;
            padding: 10px;
            -webkit-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 20px;
            -webkit-border-bottom-right-radius: 30px;
            -webkit-border-bottom-left-radius: 0;
        }
    </style>
    <div class="css3">
        how arwe you dear
        <br />
        Its a test Rounded corners<br />
        but it uses CSS3
    </div> 

But this technique support only for latest browsers who has CSS3 compatibility.

You can also create Pure Rounded corner CSS online:
http://www.spiffycorners.com/index.php