Rounded Corner Box without using image

In webpage designing when you have to make a rounded corner box, you have an easy option to put whole box image or go thru difficult option of using just rounded corner images and placing them on each corner using CSS. But now you can have perfectly smooth rounded corner boxes without any use of image. All you have to do is define the box as a DIV and then have few lines of CSS for that DIV. Here is an example of what I am talking about:

 

HTML:

<div id=”rcbox”></div>

 

CSS:

#rcbox {

width: 300px;

height: 300px;

background-color:#3CF;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

}

 

OUTPUT:

Yes it’s just that simple and beauty of this CSS is that if you want more curvy box then all you need to do is just increase the value of ‘border-radius’. Obviously the height and width of this box is also flexible and can be changed in CSS to desired value.

All new browsers support this CSS except old IE versions.

 

Mohd. Hashim Khan

I work as a freelance web designer and developer and enjoys fiddling with machines and electronics stuff. I am also working as a part time computer teacher at Aligarh Muslim University. I share my knowledge on various topics here so that others can make use of it and take benefit from my experiences.

You may also like...

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.