Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Story on base tag.
base tag story search bar.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Tips on managing links.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

CSS Tip:
Border Control With CSS

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

  
March 2002
Vol. 5, No. 5
 • Beginner Tip
 • CSS Tip
 • Promotion Tip
  

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:

Photo of Buster the Wonder Dog

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:

  • border-top
  • border-bottom
  • border-right
  • border-left

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

That gives you this effect:

Photo of Buster the Wonder Dog

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:

Buster the Wonder Dog in Netscape 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.

  • Explorer 5.0 browsers don't support "dotted" and "dashed" border-style values.
  • Include border-style and border-color or Explorer browsers will ignore border-color.

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:



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.