, , , , ,

Lot of webdesigners uses rounded corner tables and divs to display information on the webpage. Not only it looks sleek but also eye appealing.

The problem with coding such DIVs is that there is no standard way of rounding off the corners available in CSS (till now). Designers overcome this problem by using corner images to display around a DIV to make it look rounded. But this approach is not always advisable as it makes the code tedious.

There are lot of code snippets around to create rounded corner DIVs using images. But here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.

Add following CSS attributes to your element to make its corner round.

To make corners rounded, use following CSS:

selector {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid;

To make only Top Left corner rounded, use following CSS:

selector {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border: 1px solid;