Best Practices Web Design

Looking for the lessons? Get started!

Short description of page contents.

The entire Web Design Principles section can be accessed through the menu below.

Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

[W]hy should love stop at the border? — Pablo Casals

CSS allows you to place borders around elements such as paragraphs, divs, and other block-level items. You have a number of options as to both styles and widths.

Border Styles

• solid
• double
• groove
• dotted
• dashed
• inset
• outset
• ridge
• hidden (the default)

Let’s take a look at how they shape up in our stylesheet. We’ll use the <p> element to hang our border on, and give each paragraph a class corresponding to the border style.

More about classes.

p.solid {
   border-style: solid; 
}

OR

p.double {
   border-style: double; 
} 

OR

p.groove {
   border-style: groove; 
} 

OR

p.dotted {
   border-style: dotted; 
} 

OR

p.dashed {
   border-style: dashed; 
} 
OR

p.inset {
   border-style: inset; 
} 
OR

p.outset {
   border-style: outset; 
} 

OR

p.ridge {
   border-style: ridge; 
} 
OR

p.hidden {
   border-style: hidden; 
}

gives us:

This paragraph has a solid border around it.

This paragraph has a double border around it.

This paragraph has a grooved border around it.

This paragraph has a dotted border around it.

This paragraph has a dashed border around it.

This paragraph has an inset border around it.

This paragraph has an outset border around it.

This paragraph has a ridged border around it.

This paragraph’s border is hidden.

Almost no one uses the hidden value for a border unless it is to override an earlier styling.

Border Widths

Border widths work only if styles are also chosen (obviously). You can make your border a single pixel in width or something hugely big, whatever works for your design needs. While there are keywords such as “medium” and “thick” available, I’ve never seen anyone use them. Stick with pixels.

p.groove {
   border-style: groove;
   border-width: 10px;
}

gives us

This paragraph has a grooved border 10 pixels in width.

Border Colors

By default, borders show in black in most browsers. If you find that boring, you can change that color to something far more spiffy.

p.groove {
   border-style: groove;
   border-width: 10px;
   border-color: #f25f0f;
}

gives us this:

This paragraph has a grooved border 10 pixels wide, colored in spiffy orange.

(Notice that some border styles automatically give a lighter variant of the selected color to help create the groove, or ridge, or whatever styling.)

You can use other color value methods such as RGB or keywords (i.e. 100 100 255 or blue, but I prefer the hexes.

Setting the Direction of Your Borders

So far we’ve looked at making borders for all four sides of the block element. If you want a border on fewer than four sides, that’s easy to implement.

The key is the border-[direction] property. You pick your choice of direction (or side):

• top
• right
• bottom
• left

No surprise there....

However, most designers don’t use it by itself, but in conjunction with other border style properties. Here are some examples, cribbed from the page at Tizag. You can get an idea of how it’s used, and then try your own combinations.

p { border-bottom-style: dashed; 
   border-bottom-color: yellow; 
   border-bottom-width: 5px; 
}

gives us:

This paragraph has a yellow, dashed bottom border 5 pixels in width.

p { border-top-style: double; 
   border-top-color: purple; 
   border-top-width: thick;
}

gives us:

This paragraph has a purple, double top border using the “thick” CSS value (which we normally don’t use).

And you can add multiple border styles to a single paragraph (or other element) for maximum, over-the-top styling.

Combining the Selectors and Values

Most designers don’t waste time and bandwidth writing multiple lines of border code. It’s much easier to combine them into one line, using the border property.

Here’s one example, combining three values of width, style, and color:

p {
   border: 20px outset blue;
}

giving us:

This paragraph has a border 20 pixels wide, blue in color, and outset.