Rounded Corners without using Images

by Darkman | in HTML & CSS | posted January 25, 2007

Default star (3 votes) | 5462 views

This is a easy tutorial. Using this technique you can create rounded corners without using any images. It just uses pure CSS and HTML.

Add to del.icio.us | Digg this | Dot This

You must login in order to rate this.

I welcome you all to this Easy tutorial to create Rounded Corners with using any images.
This works perfectly in Firefox, Netscape and Safari. Unfortunately Internet Explorer is not advanced enough to render this :P

This is a part of CSS3. But it doesn't in any Browser yet. But by addin a prefix -moz- , these can be used in Firefox, Netscape and Safari.

Ok. Now lets go into the coding.
Our Rounded Corner box uses simple a Single Style. You must define a stlye as follows :

Code:

#inner {
    background:#0074AD;
    color: #ffffff;
    width:200px;
    padding: 15px;
    -moz-border-radius: 15px 15px 15px 15px;
}

Now we should use assign this style to a DIV. Follow this Code :

Code:

<div id="inner">These Kinds of Rounded boxes are really simple and saves the webmaster's time. They dont use any images.</div>

Of course, you can use your own content. You'll have an Output as follows :

Now we'll see what the lines in the style mean.
1) background:#0074AD;
This defines the basic background color of our Box.

2) color: #ffffff;
This will define the color that is going to be used inside the box.

3) width:200px;
This defines the main width of the whole DIV. Height will be automatically adjusted depending upon the content.
If you don't use this line, the width will automatically be set to 100%

4) padding: 15px;
This is an important as this will decide the distance of the content from the sides.

5) -moz-border-radius: 15px 15px 15px 15px;
This is the most important line as this decides the radius of the Curve.

Now we'll see different way of using this Style.

1) With Borders:
To use this we need to add one line to the Style :

Code:

border:1px solid #ffffff;

so that the code becomes :

Code:

#inner {
    background:#0074AD;
    color: #ffffff;
    border:1px solid #ffffff;
    width:200px;
    padding: 15px;
    -moz-border-radius: 15px 15px 15px 15px;
}

You can have any thickness for the border and any color for it.
Following is an Example of this :

2)Curved & Square
If you want only certain sites to be Curved, you can edit this line :

Code:

 -moz-border-radius: 15px 15px 15px 15px;

It is of the syntax :

Code:

-moz-border-radius: top-left top-right bottom-right bottom-left;

For Example, use the following code :

Code:

    color: #ffffff;
    width:200px;
    background:#0074AD;
    padding: 15px;
    -moz-border-radius: 0 25px 0 25px;

It will produce the following result :

You can also edit this code very mcuh to suit your needs.
Hope you liked the Tutorial.

There are 1 comments to this post.