CSS border property

The different “border” properties you can define are:

• border-width
• border-style
• border-color

border-width

border-width is normally defined in px for viewing online, although you could also use px, in (inches), cm (centimeters), or mm (millimeters) in the CSS you use for printing on paper.

border-style

The possible attributes for border-style are:

• none
• hidden (you should never have a use for this)
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

In all of the above examples, I used 3px for the border-width and they all use the same border-color.

When you use groove, ridge, inset, and outset, the results will vary from browser to browser (Firefox vs Internet Explorer, for example), but all the other border-styles are safe for cross-browser compatibility.

border-color

The possible atributes for border-color are any hex color code (see glossary entry for hex codes) or a name value such as white, black, green, etc. I prefer to use hex codes since they can be tweaked, unlike names.

Examples

Now for a couple of examples to see these three border properties in action:

p {
   border-width: 2px;
   border-style: solid;
   border-color: #c9c80d;
}

.intro {
   border-width: 3px;
   border-style: double;
   border-color: #f98c0d;
}

Shorthand

Border shorthand must follow this order:

• border-width
• border-style
• border-color

To shorten the above two examples, it would look like this:

p { border: 2px solid #c9c80d; }

.intro { border: 3px double #f98c0d; }

Return to list of CSS properties

If you found this article useful, please spread the word: