Shorthand Border Radius

When I first started using the border-radius property, I was slightly confused as to why it didst have a shorthand counterpart. I later found out it did indeed have one, but it wasn’t used much at all because it’s slightly different to the shorthand used with padding & margin.

Take a look at this image. It should show you what corners are affected in relation to where the integer is in the code.

corners

The code to go along with this is (with browser specific prefixes (-moz- being Firefox & Camino and -webkit- being Safari and Chrome)):

#box {border-radius: 5px 10px 15px 20px;}
#box {-moz-border-radius: 5px 10px 15px 20px;}
#box {-webkit-border-radius: 5px 10px 15px 20px;}

Not there’s no excuse to use four lines in your CSS file for rounded corners!

Do you know any other less popular short hand code? Please share!