Rounded Corners for Tables and Boxes

Rounding the Corners of Boxes and Tables

In the example below, the html element named box1 has rounded corners.

Rounded corners can be obtained with the border-radius property in CSS3. New versions of all browsers recognize this feature.

However, for older versions of browsers, it is necessary to use a prefix such as -webkit- or -moz-.

It has been used in all ways in the example to ensure that it works in as many browsers as possible.

For rows that contain a radius, the amount of rounding the corners is adjusted. In the lines with shadow, the table or box is shaded.

It is not necessary to use both shadow and radius properties together. If desired, only radius or shadow can be used.

These css codes will not work in very old versions of browsers.

Rounding Each Corner a Different Amount

If we wish, we can apply rounding to each corner of the objects with different angles. 

Also, all vertices can be specified in one line:

In such uses, all corners can be specified in clockwise order starting from the top left. 

Creating Elliptical Corners

Instead of making the corners circular, we can also make them elliptical. Check out the topic examples section.

EXERCISES