The latest on using border-radius to make rounded corners

The CSS property border-radius is used to make rounded corners. A rule such as

#twitter {
border: solid 1px blue;
border-radius: 10px;  }

Would round the borders of a an element with the id="twitter" by the same amount on all sides.

As with all CSS rules involving the box model, you could choose to round each corner differently. For example,

#twitter {
border: solid 1px blue;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 20px;  }

In the past, vendor specific prefixes were needed along with the border-radius property. One was needed in the past for webkit (webkit-border-radius) and for mozilla (moz-border-radius).

The good news is that webkit browsers, which includes Safari and Chrome  no longer need the vendor specific prefix. Firefox after version 4 also supports border-radius. IE9 supports border-radius. Opera supports border-radius.

Heres the take-away headline: modern browsers now work with border-radius.