Put a border on it

01 / 04

A border is made of three pieces

The property for a border is border. Its value is a thickness, a kind and a colour, written out with spaces between them.

They work in any order, but this one reads best.

.box {  border: 2px solid #333333;}

02 / 04

The middle value changes how the line looks.

When in doubt, solid. It is the one you will use most.

.box {  border: 3px dashed #0066cc;}

03 / 04

When you want a line on one side rather than all four, add the name of the side to the property.

An underline beneath a heading is made with border-bottom as a matter of course.

.title {  border-bottom: 4px solid #ff6600;}

04 / 04

Here is where people trip. Put a 4px border on a box 200px wide and on screen it takes 208px, because 4px goes on each side.

When boxes set in a row spill over, it is usually the border you forgot to count. Have a go.

.box {  width: 200px;  border: 4px solid #333333;}