Best shorthand to CSS border property

When I started coding CSS I coded the border property as:

.box{ 
  border-width: 1px;
  border-style: solid;
  border-color: blue;
}

And after a few months later I improved in coding the same property as shorthand:

.box{
  border: 1px solid blue;
}

If the border colors needed to be different, or if the requirement is like - I need left, right, and top borders but not the bottom border. To this, I used the property as:

.box{ 
  border-top: 1px solid blue;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
  border-bottom: 0 none;
}

The above method can be improved with the new/unknown CSS border shorthand:

.box{
  border-color: blue;
  border-style: solid;
  border-width: 1px 1px 0 1px; /*top right bottom left*/
}

Check the demo: http://jsfiddle.net/X3QHc/

Here's how it works: 

.box{
  border-color: red green blue black; /*top right bottom left*/
  border-style: solid dotted dashed double;
  border-width: 6px 4px 2px 10px;
}

Check the demo: http://jsfiddle.net/X3QHc/1/

Related Articles: 
- Styling input type file
- IE 7/8 stretching background image to 100% width and height
- Change parent elements background image position on child mouseover