CSS: border-radius syntax and example

The CSS border-radius property has a peculiar syntax. First of all, it is a shorthand property that set the radius of each border in a single declaration. For that reason, it's the most used property for getting the effect of rounded corners on element boxes. Its syntax is:

border-radius(topleft, topright, bottomright, bottomleft)

where the four border radiuses are specified in the order described above. Here's an image:

So if you want to specify a radius on all borders, simply write this:

#test {
  border-radius: 10px;
  /* topleft, topright, bottomright, bottomleft */
}

If you want a radius only on the top borders, for example when you want to create a tabbed menu, you can write:

#menu li a {
  border-radius: 6px 6px 0 0;
  /* topleft, topright */
}

Finally, if you want to set a radius only on the bottom left border, you can use this declaration:

#test {
  border-radius: 0 0 0 6px;
  /* bottomleft */
}