Putting Style Sheets in Perspective border-width Shorthand

'border-top', 'border-right', 'border-bottom', 'border-left'

This is the shorthand for setting the border properties individually. Properties not specified are set to their initial values.

	
.trbl{
  border-left  :
	.2em solid  red;
  border-right:
	.2em solid  red;
  }	

Specify the sides of your box, change colors, or vary the thickness of your border! Group all of the different border properties into one shorthand property. Consider the following two examples... which would you rather type?

.bordershort { 
	border-top	: thin solid blue;
	border-right	: .7em solid red;

	}

.borderlong {
	border-top-width	: thin;
	border-top-style	: solid;
	border-top-color	: blue;
	border-right-width	: .7em;
	border-right-style	: solid;
	border-right-color	: red;
	}

Additional Resources:

• W3C: 8.5.4 Border shorthand properties
• Project Cool: Dynamic HTML Developer Zone
• Knoblock's Style Cookbook: Adding Borders Effectively

Putting Style Sheets in Perspective: border-width
Putting Style Sheets in Perspective: Marginally Speaking
Putting Style Sheets in Perspective: border-property