Magic of CSS3 Part I

Border-radius: create rounded corners with CSS! :

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. This is an example

These different corners can also each be handled on their own, Mozilla has other names for the feature than the spec says it should have though, as it has

Mozilla/Firefox and Safari 3 users should see a box with a rounded left upper corner.
Mozilla/Firefox and Safari 3 users should see a box with a rounded right upper corner.
Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner.
Mozilla/Firefox and Safari 3 users should see a box with a rounded right lower corner.

These are handled by / should be handled by:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius