CSS’s Border Attribute – Usage and Best Practices

This is the second part in a three part series. Today we will be covering the Border attribute. The first article was on the Background Attribute and the last article will be on the Font Attribute so stay tuned and subscribe. Part one of this CSS series is linked below.

1. In-Depth Look at CSS’s Background Attribute

Some background on the Border Attribute

Borders used to be those ugly gray things that surrounded elements such as tables and frames, but now with CSS they are a very powerful tool for designers.

Overview

There are 3 properties available in CSS2 relating to the border attribute.

• border-color : Sets the actual color for the border
• border-style : Sets the style of the border
• border-width : Sets how thick the border will be

Usage of basic properties

Border Color

The border-color property sets a specific color for the border of the chosen element. Here are some examples of what this property may look like.

border-color: #999;
border-color: rgb(100,200,200);
border-color: red;
border-color: transparent;

Border Styles

The border-style property sets the style of the border on the specified element to whatever value it’s given.

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: none;
border-style: hidden;

Border Width

The border-width property determines the thickness of the border on any given element.

border: 3px solid #64c8c8;
border: .5em solid #64c8c8;
border: thin solid #64c8c8;
border: 10pt solid #64c8c8;

Speed up the process with short hand

This little piece of code is a gem, you might want to take notes on this one. This combines all three border properties into one for increased productivity.

border: (width) (style) (color);
border: 1px solid #999;

Great Examples of Border Usage

1. Kammeradvokaten

This site uses a mixture of typography and borders to bring a truly effective simplistic look. The borders act as organizers for the content. Very well done.

2. Open

This is also another beautiful example of the border attribute. Open has used borders to basically section off each piece of content. Everything is well aligned and they used multiple styles of borders.

My challenge to you

When you are designing that new portfolio or a site for a client, push yourself to incorporate borders in the design. It will not only be a challenge to do it well, but you as a designer will benefit from branching out from the norm. If you do complete this challenge or have completed this challenge please leave a link in a comment so our readers can check them out!

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles