Five Minute Upgrade – Using CSS Borders for Emphasis

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.

This box has no border.
This box has a thin 1 pixel dark border.

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

Wordpress Border Colors

Facebook Notifications

Facebook Border Colors

YouTube’s What’s New

YouTube Border Colors

Gmail Login

GMail Border Colors


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!

Posted Thursday, January 29th, 2009 · Back to Top

SPONSOR

Add Comment

8 Comments 6 Mentions

  1. Heather Author Editor

    A nice simple touch! Great write up.

    ·

  2. Dennison Uy Author Editor

    I don’t think Gmail Login uses borders because I do not get them on Firefox, but I do get them on Chrome and Safari. Makes me wonder where you got those color values?

    ·

  3. Mike Wilson Author Editor

    The link to Ghost Web was all I needed to start my day of right. It really gave me something to set my sights on, in hopes that one day my mastery of html will get me to that point.

    ·

  4. Zach Dunn Author Editor

    @Dennison Uy – The layout is actual table based, so it is the table cell with the border. The hex value listed above was the result of sampling, but here’s the exact line in question (the hex value here is slightly differing from the sample)

    .form-noindent {background-color: #ffffff; border: #C3D9FF 1px solid}

    Thanks for the comment, sorry for any confusion!

    ·

  5. Samantha Meemken Author Editor

    Great real world examples. Thanks for the reminder that simple is usually best.

    ·

  6. Johan Author Editor

    Note that there is an annoying bug in firefox when you use a double border around a button (Double {border: double;}) In firefox the space between the borders takes up the color or the button background which can be a right pain!

    ·

  7. tim Author Editor

    Borders are great so long as they are subtle – stick to the 1px solid and you can’t go far wrong. Nice post.

    tim’s last blog post..To rest or not to rest…

    ·

  8. Digital Marketing Agency Author Editor

    Keep it Simple! So fitting I think.

    ·

 

Build Internet by One Mighty Roar. Since 2008.