CSS Tip:
Border Control With CSS

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

If you’ve ever doubted the claim that Cascading Style Sheets (CSS) give you absolute control over page layout, then you’ve never played around with CSS border properties. Use them to put a custom border around anything on your page – from text to images to tables. They’re a great way to add emphasis and visual interest to your page without increasing page load time with images.

Visually Separate Page Elements

You can put a border around just about anything on your page and – with CSS – customize it to match your page’s color combinations, draw attention to a particular element, or emphasize important points.

Do this by setting border attributes in your STYLE specification:

In this example, the .image specification would be the border type you want around images, while the .quote specification might outline your page’s pull quotes or other elements. You can name these anything you want, but remember that the names are capital letter sensitive and can’t begin with a number.

Here’s how you would use them in your HTML code:

Here’s how they look on a Web page:

The World Wide Web Consortium (W3C) offers a more in-depth of discussion of borders and border properties in the CSS section of their Web site.

Now, this technique creates a border that looks the same on all four sides. But what if you want some different effects? It is possible to create borders that look different on each side.

Each Side Is Unique

Think about how many wooden picture frames are constructed. When four separate pieces are connected, they form the top, right, bottom, and left sides of the frame.

Just like you could glue together four pieces of wood with different colors and widths to make a picture frame, you can also create a border that looks different on each side. All you have to do is set the property of each of the different sides:

So let’s refer back to the previous example and make changes to the quotation border:

That gives you this effect:

While you probably wouldn’t want to overuse this technique, it is a way to create colorful effects on your page without using a lot of images. If you didn’t have access to the colorful CSS border effects, you’d have to create the entire element as an image file.

Browser Compatibility Issues

The examples we’ve showed you illustrate how the borders display in Explorer 5.x+ and Netscape 6.x browsers. But remember that Netscape 4.x browsers don’t support CSS effects very well, so you could have a lot of unexplained style sheet problems if you’re not careful.

One problem is the Netscape 4.x browser's unreliable support for border styles that are linked to images, tables, lists, hyperlinks, and form fields. NS 4.x browsers also tend to ignore attributes that set the four sides of a border in a single definition.

Here’s how our second example displays in NS 4.7:

Notice how NS ignores the border around the image? You do see a border around the quote, but lose the color effects.

Explorer browsers also have a few quirks you need to be aware of.

So whenever you’re using CSS, it’s very important to test your page thoroughly in all browsers. You can get great effects with borders in some browsers, while other browsers may ignore all your careful formatting entirely.

If you don’t have the time or money required to do really professional testing of your Web pages, try NetMechanic’s Browser Photo. It’s a quick and cost effective way to view your page layout in 16 different browser and computer combinations. With Browser Photo, you’ll find and fix problems long before your visitors see them.

Learn more about creating custom effects with style sheets in our newsletter archive: