CSS Shorthand, Part 2: Borders

This is Part 2 of our "CSS Shorthand" article. Be sure to read "CSS Shorthand, Part 1: Padding and Margins" if you missed it. After you have learned the basic CSS rules, you will be amazed at the extensive potential cascading style sheets offers. I would highly recommend reading through most of our CSS tutorials so you can understand the basic concept prior to jumping into this CSS shorthand series. It will certainly make more sense to you especially if you are new to this web programming language.

Most of our tutorials refer to the External CSS method, because that is what we use in the development of our web templates and is the most logical way to design a functional web site interface for the end user (our customers and members). You may want to familiarize yourself with why "external" style sheets are the most effective way to design a web site (rather than internal or inline), by first reading our article, "External, Internal or Inline? Which Method is Best?".

This tutorial will focus on the border shorthand technique. Sample code for the full and shorthand methods are shown below for comparison purposes. The key elements of the border properties are: style, width and color. Important: It is very important that you think of the progressive flow of the border-width shorthand properties as being clockwise: top, right, bottom, left.