Five Minute Upgrade – Using CSS Borders for Emphasis

Zach Dunn on January 29th, 2009 Posted in Articles

I’ve noticed recently that many of the techniques used by top designers are actually quite simple. It’s how these simple elements are pieced together that makes a design brilliant. Today we’ll be looking at the first one of these highly effective, yet strikingly simple design methods with the use of CSS borders.

Borders have a lot more impact than most people realize. They can make a design look miles better with only minutes of work. The little characteristics like weight, style, and color have big effects on either drawing elements out or making them fit into the background.

Making a Box “Pop”

Take a look at these two boxes. You’ll notice the first has no border, while the second has a darker thin one.

The second one seems to pop a little bit more doesn’t it? Notice how the border color is not so far off from the background color. This is key.

It’s this subtle difference in color that helps the second box distinguish itself more from the surrounding content. The outside border separates the box from the flow of the page, while keeping it from sticking out like a sore thumb.

Real World Examples

There are great examples of border emphasis all over the web. I’ve put together a few from some more popular websites below. The colors for each are provided.

Wordpress 2.7 Dashboard

Facebook Notifications

YouTube’s What’s New

Gmail Login

Different Types of Borders

You have many options for border styles in CSS. I’ll review them here because if you’re like me, you rarely use anything but “solid”.

None {border:none;}

Solid {border: solid;}

Double {border: double;}

Groove  {border: groove;}

Dotted {border: dotted;}

Dashed {border: dashed;}

Inset {border: inset;}

Outset {border: outset;}

Ridge {border: ridge;}

Remember that even though the specific CSS property is “border-style”, it is a subset of “border” and we can include it as shorthand within the border property. If you are more comfortable breaking up the properties to their own lines, it will not effect the end result.

You can find additional information and a demo of each over on W3Schools.

Remember the 90’s

You may have just discovered a few new types of borders to use. Hold on a second! There is a reason you don’t see many of these used anymore. As web design has become more refined, the days where a ridged outline was a design asset have disappeared.

When it comes to HTML/CSS design, simple is generally better. Impress people with the typography, layout, and color scheme instead. Flat borders like dotted, solid, and dashed are probably your best bet. Using one of the other types may give your page a certain retro-nineties look.

Want more five minute upgrades?

This is the first in a series of five minute upgrades we’ll be running in the coming month to provide a series of quick fixes with fantastic end results. They’ll be a variety of simple tweaks to existing style sheets, code optimization, and layout pointers to help shape up those websites that are so close to being phenomenal.

Sound like something you’d like to see? Be sure to subscribe to our feed to be notified as future five minute upgrades are released.

Have any pointers or tips of your own when it comes to border emphasis? Let us know what you’ve got and share them in the comments!