Borders

Borders have three properties:

border-width: length | thin | medium | thick
border-style: solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden
border-color: color;

Borders add to the size of a box... more on this later when we explore the box model in greater detail.

Borders do NOT inherit and the default is border-style:none (no visible border). You must explicitly set a border style for an element to have a border; or you could use the inherit value for the border property to force a child to display the same border as its parent.

Borders are drawn on top of the element's background. The effect of this is that background color or a background image will show through the open spaces in a dashed or dotted border.

Here is a basic example:

.borderSimple {
  border-width: 2px;
  border-style: solid;
  border-color: #F00;
  }

The border-width keywords: THIN, MEDIUM and THICK are not explicitly defined by W3C. UA's are free to specify actual properties for these keywords. Most browsers display MEDIUM as a 3px line. THIN is generally 1px, though IE6 displays 2px. Thick is typically 5px, though Opera displays 6px.

The borderSimple class is applied to this paragraph. Only a border is applied. This paragraph has default padding (none) and default margins (top and bottom, no horizontal margins right and left). The paragraph is also justified to show the right edge of the content area.

All four sides of the border are given the same properties. Later, I'll explain how to declare properties for a specific side for different border effects.

Border Shorthand Notation

You can set the border for elements using the border shorthand property, which then sets the border for all four sides ... with a line thickness, a line style, and a color.

Using the shorthand property, the .borderSimple rule could also be written:

.borderSimple {
  border: 2px solid #F00;
  }

When using the shorthand notation you provide any of the 3 possible values, in any order. Though you do not have to provide all of the values, you must declare a border style value in order for the border to display.

If you omit any of the values, the following initial values are used for the missing properties.

color: the element's color property
thickness: medium
style: none (do not display a border)

Here are more examples of shorthand border declarations:

.important { border: solid 1px; }
.note { border: 2px dotted; }
.highlight { border: thin green dashed; }

Declaring Properties for Specific Sides of the Border

Thus far, I've demonstrated border declarations that specify the same properties for all four sides of the border. An alternative is to use the more specific properties: border-left, border-right, border-top and border-bottom to define different properties for any of the sides.

Here's an example:

.borderSpecSides {
  border-top-width:    2px;
  border-top-style:    dotted;
  border-top-color:    aqua;
  border-right-width:  4px;
  border-right-style:  solid;
  border-right-color:  teal;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: blue;
  border-left-width:   2px;
  border-left-style:   solid;
  border-left-color:   lime;
  }

The borderSpecSides class has been applied to this paragraph. Note that each side has different border properties. This paragraph is also justified to show the right edge of the content area.

The above rule can also be declared using shorthand properties:

.borderSpecSides {
  border-top:    2px dotted aqua;
  border-right:  4px solid teal;
  border-bottom: 5px solid blue;
  border-left:   2px solid lime;
  }

It is common to use the shorthand property to set all borders appropriately, then override individual properties using a specific border property:

.sidebar {
  border: 1px solid green;
  border-left-width: 7px;
  }

All four sides of the border are solid, and green. The left border is 7 pixels thick, while the other three are 1 pixel thick.

The sidebar class has been applied to this paragraph.

One last example before moving on ...

.borderExample {
  border: 1px solid #333;
  background-color: #DEE7EC;
  padding: 6px;
  }

This paragraph is styled using the borderExample class. It is also justified to show the left and right edges of the content area. Note that

This paragraph has an EM element within the paragraph. This is the EM element. The EM element also has the borderExample class associated with it ...

An inline element can also have its own border, margin, and padding properties associated with it. You aren't restricted to applying CSS box model properties to block elements.

The `border-style` Property

The possible values for the line decoration style are none (the default), solid, dotted, dashed, double, groove, ridge, inset and outset.

Dotted, dashed, solid and double borders are drawn as flat lines on top of the element's background.

Groove, ridge, inset and outset borders are 3-dimensional effects. The groove is an "incised" line; the ridge is an "embossed" line. Note that the way these are rendered may vary from UA to UA.

The inset style makes the content area appear to "sink into" the document while the "outset" style gives the effect of the content area being "raised" above the document.

According to the W3C specification , a UA is allowed to render all border styles as a solid line, and still be considered a compliant UA.

Except for the solid border style, there is inconsistent support and appearance of border styles. For example, older browsers do not support the dotted style, and IE6/Win displays 1-pixel dotted borders as 2-pixel-wide dashes (all other dot widths are 'normal'). The ridge and groove styles do not work in IE 7 Windows and in Safari and IE Mac. The W3C does not precisely define the double border, so its appearance may vary from UA to UA.

Do adequate browser/platform testing before deploying a site using any non-solid border style!

This paragraph has the dotted border-style.

This paragraph has the dashed border-style.

This paragraph has the double border-style.

In order to display a double border, you must specify a minimum of 3 pixels for the border width. Also, depending on the border width value and the UA, the two lines of the double border may or may not be equal in thickness!

This paragraph has the groove border-style.

For either the groove or ridge style, you must specify a minimum of 2 pixels for the border width. If you specify only 1 pixel for the border width, the effect is identical to a 1 pixel solid border.

This paragraph has the ridge border-style.

This paragraph has the inset border-style. I've set the margin to be wider and added some padding to emphasize the effect.

For either the inset or outset style, you should specify a minimum of 3 pixels for the border width. The effect is too subtle if you specify a smaller width.

This paragraph has the outset border-style. I've set the margin to be wider and added some padding to emphasize the effect.

The color of borders drawn for values of groove, ridge, inset, and outset depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used. For instance, Firefox 2.0 uses the color as a midpoint for the inset and outset border shading values. The lighter edges are 55% lighter than the midpoint color, and the darker shaded edges are 55% darker than the midpoint color.

Borders, Padding and Margins

Borders

Border Shorthand Notation

Declaring Properties for Specific Sides of the Border

The border-style Property

The `border-style` Property