You might have seen the round rectangular boxes on the web layouts, as a naive and new developer you might wonder are they simply using the image background?? though many tend to use the images as for getting the rounded corners…

but hey we have much of an effective way of getting this on our page with out any image used here, as usual the magic done with our CSS, so let me share this simple css code that will help you getting the rounded edge for your div tag.

The code goes like this,

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

here the pixel values we give defines the radius to which we would like our corners to be curved, and what for the three line code??

the first line is defined for the Opera browser, the second line is for the mozilla fire fox and the basic general code in the third line.

There is a problem though that keeps this technique not used is that the Internet Explorer has got no such CSS support that might allow it to have the rounded corners. So we might have to keep us only to the other browsers mentioned above. As for getting a browser compatible site we may have to give this up.. but using this does not reflects on the layout, except that the corners appear as straight squared in IE browsers..

So just give a try, and keep hoping these browsers come up with solutions that really eases our task and stops us from pulling our hair for every single layout issue.. 🙂 the dawn is yet to come..

%d bloggers like this: