HTML UI elements with rounded corners without using images

You can stylish the web UI elements with the help of CSS declaration as you need. One of the stylish design for web UI elements is designing them with rounded corners.

Many people would use the images to design UI elements with rounded corners. But here is I am describing about making UI elements with rounded corners without using any images. In this article I am describing about HTML DIV tags with rounded corners with sample example. The same approach would be applicable all HTML UI elements.

<div id="dvRounded" class="RoundedCorner">
    This is a div container with rounded corners.
    <b r />
    Srinivasa Rao Dhulipalla
</div>

We can do this in three different ways:

•  Apply all corners as rounded
• Apply specific corners as rounded
• Apply all/specific corners as rounded with different radius

All corners as rounded:

To make any UI element as rounded corner, all we need to set the CSS style is: border-radius

This CSS declaration border-radius will work on all latest browsers. The CSS declaration to make all corners of the above DIV is:

        .RoundedCorner
        {
            border: 2px solid Red;
            background-color: #AFEEEE;
           
            border-radius: 10px;
           
            padding: 5px 5px 5px 5px;  /* top right bottom left */
            text-align: center;
            width: 500px;
        }

The resulted output you will get to see in browser as:

Specific corners as rounded:

We can also apply rounded corners to specific corners like top-left/top-right/bottom-left/bottom-right. Here is the CSS declaration on this:

         .RoundedCorner
        {
            border:2px solid Red;
            background-color:#AFEEEE;
           
            border-top-left-radius:10px;
            border-top-right-radius:10px;          
           
            padding:5px 5px 5px 5px; /* top right bottom left */
            text-align:center;
            width:500px;
        }

The above example will apply rounded corners to top-left and top-right only. You can also use below declaration to set rounded corners to bottom-left and bottom-right.

         border-bottom-left-radius:10px;
         border-bottom-right-radius:10px;

This will result you in browsers as shown here:

Rounded corners with different radius:

You can also apply different radius to different corners to make them very much stylish. Here is CSS declaration:

        .RoundedCorner
        {
            border:2px solid Red;
            background-color:#AFEEEE;
           
            border-radius: 10px 65px 10px 10px; /*clock wise: topleft-topright-bottomright-bottomleft*/
           
            padding:5px 5px 5px 5px; /* top right bottom left */
            text-align:center;
            width:500px;
        }

In this example top-right corner have more radius than other corners, and it leads to that corner will rounded with more radius as shown in below example.

At the same time you can also prefix -moz- for firefox and -webkit- for other browsers to the above given CSS declarations as shown below:

         -webkit-border-top-left-radius
         -moz-border-radius-topleft

I hope this helps out to people who are looking for making HTML UI elements with rounded corners. At the same time you might refer my summary table on this:

	IE, Chrome, Mozilla, Safari, Opera	Mozilla old versions
All corners	border-radius	border-radius
Top Left corner	border-top-left-radius	-moz-border-radius-topleft
Top Right corner	border-top-right-radius	-moz-border-radius-topright
Bottom Left corner	border-bottom-left-radius	-moz-border-radius-bottomleft
Bottom Right corner	border-bottom-right-radius	-moz-border-radius-bottomright