Rounded Corners

Description

border-radius allows us to add rounded corners to our elements. Works only in Opera(PC). Add -webkit- or -moz- prefix to work in Chrome, Safari, or Firefox.

Code Example

div.rounded{border-radius:1em;-webkit-border-radius:1em;-moz-border-radius:1em;}

The next div is given top rounded corners only.

div.toprounded{-webkit-border-top-left-radius:1em;-webkit-border-top-right-radius:1em;-moz-border-radius-topleft:1em;-moz-border-radius-topright:1em;}

Circle example

div.circle{width:6em;height:6em;border-radius:3em;-webkit-border-radius:3em;-moz-border-radius:3em;}

Result

Browser Support

Notes