Monday, April 21, 2014

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