Using CSS Borders for Emphasis

Author: Zeeshan

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.