Borders

The border property defines borders for HTML elements. There are three components for a border:

border-width

A length, such as "3px" or "0.2em". Most web designers specify their borders in pixels.

border-color

A color, such as "green" or "#ff0000". The default color is usually black.

border-style

A keyword that indicates how to draw the border's lines. The basic style is "solid". There are fancier options available: these include "dashed", "dotted", "double", "groove", "inset", "outset", and "ridge". There is also a "none" option that suppresses borders. Note that browsers do not have to support the "fancy" border styles -- they are free to replace any of these styles with "solid".

Sample Borders

Let's take a look at a few examples. We'll be applying our borders to <div> tags. However, you can apply borders to pretty much any tag you like: paragraphs, lists, and so on.

div.thickline { 
  border-width: 10px;
  border-style: solid;
}

div.thinblueline {
  border-width: 1px;
  border-color: #0000ff;
  border-style: solid;
}

div.greenridge {
  border-width: 5px;
  border-color: green;
  border-style: ridge;
}

div.empurpledash {
  border-width: 0.5em;
  border-color: #800080;
  border-style: dashed;
}

After applying each class to its own <div>, we get the following results:

The first three borders are specifed in pixels. The last is in em, which means that as we change the <div>'s font size, the border thickness should scale with it.

Four Different Sides

In order to apply a different border to each side, you need to break down border-width, border-color, and border-style into their constituent components:

• border-width becomes: border-top-width, border-bottom-width, border-right-width, and border-left-width.

• border-color becomes: border-top-color, border-bottom-color, border-right-color, and border-left-color.

• border-style becomes: border-top-style, border-bottom-style, border-right-style, and border-left-style.

Here's an (admittedly silly) example with four different borders:

div.fourborders { 
  border-top-width: 5px;
  border-top-color: #ff0000;
  border-top-style: dashed;

  border-bottom-width: 10px;
  border-bottom-color: #336600;
  border-bottom-style: groove;

  border-right-width: 20px;
  border-right-color: #000080;
  border-right-style: solid;

  border-left-width: 10px;
  border-left-color: #CC9900;
  border-left-style: solid;
}

The resulting <div> looks like this:

You can play some interesting tricks with selective borders. For example, the <acronym> tag is rendered with a dashed underline in Mozilla-based browsers. However, Internet Explorer does not currently display anything special for <acronym> by default. Furthermore, you can't use text-decoration to simulate this effect in Internet Explorer, because there is no "dotted underline" option. But if you wanted to force both browsers to appear the same, you could try the following:

acronym.dotted { 
  border-bottom-width: 1px;
  border-bottom-color: #00000;
  border-bottom-style: dotted;
}

...

<p>
  There's nothing that I wouldn't do,<br>
  If you would be my <acronym
    title="Person of Opposite Sex Sharing Living Quarters"
    class="dotted"
  >POSSLQ</acronym>,<br>
  You'd live for me and I for you<br>
  If you would be my <acronym 
    title="Person of Opposite Sex Sharing Living Quarters"
  >POSSLQ</acronym>.
</p>
<p>
  by Charles Osgood
</p>

In the example below, we've applied the dotted style to the first acronym only. The second acronym has been left alone. This means that if you're looking at this page in a Mozilla-based browser, such as Mozilla, Netscape 7, or Phoenix, you should see dotted underlines for both acronyms. If you're using Internet Explorer, you should see a dotted line under the first acronym only.

Shorthand Notation

As with the font- properties, there is a shorthand notation for specifying borders. The property name is border. All you need do is specify your border properties in any order. This shorthand is convenient, but keep in mind that the border property can only set the same border on all four sides.

Below a version of the earlier "Four Border Examples", reformulated to use the shorter notation.

div.thickline { 
  border: 10px solid;
}

div.thinblueline {
  border: 1px #0000ff solid;
}

div.greenridge {
  border: ridge 5px green;
}

div.empurpledash {
  border: #800080 0.5em dashed;
}

The results are the same as before. (Try it.)