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.