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.
Safari on iOS still needs prefix 🙁
Anton, thanks. Sorry I missed that.
Wow, I have been praying for this! I hated having to use browser prefixes, especially when border-radius should be a universal element.
However, check your analytics before you go changing code. =P
Good point. If you have visitors using older browsers, you still need to use the vendor specific prefixes. And as Anton reminded me, it’s necessary for iOS, so you might want to stick with the webkit prefix for a while if you’re aiming at the mobile market.