CSS3: The border-radius shorthand property

The CSS3 border-radius property can be a little tricky when used as a shorthand property. The sad truth is that at the time of this writing some browsers support this property as a proprietary extension (for example, -moz-border-radius and -webkit-border-radius) with proprietary notations that can vary from a browser to another when it comes to single border properties, so using the shorthand version is a good thing to avoid confusion.

Anyway, most developers think that this property works exactly as other border properties, that is, following the order top-right-bottom-left. Right? Almost. Here are the exact values used for the border-radius shorthand property in the correct order:

border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius

These values set:

1. the top right border
2. the bottom right border
3. the bottom left border
4. the top left border

Let's say that you want to set only the top left and bottom right borders of a box. You can write something like this:

#box {
  background: gray;
  -moz-border-radius: 0 6px 0 6px;
  -webkit-border-radius: 0 6px 0 6px;
  border-radius: 0 6px 0 6px;
}

Note that we've used the proprietary extensions first. This is considered a good practice to make sure that a browser will always use the standard property, if it supports it.