Tips on Using the Outline CSS Property

Part 2 out of 2 (Part 1)

The only time a web designer notices the Outline property is when you want to disable it, and you’re wondering how to do so or if it’s even possible. But you can actually use the property to do very clever things.

At a first glance, the Border and the Outline property look very much alike. They share the same rule structure, and they both put a border around any object you want. But there are two fundamental differences.

1. When the browser calculates the width of a floated object, it takes into account Width, Padding and Border.

Notice how setting a border adds to the total width, while the outline doesn’t.

2. Since borders take up space, you can have problem aligning elements on a webpage using borders. However if you use an outline instead, the “border” will just be a layer on top of the image and won’t push your element anywhere. Notice how the second image’s inside border still lines up with the text.

This is very useful for registration processes, if you want to show a field that needs to be corrected: Instead of applying a border and having the textfield move X amount of pixels horizontally you can apply an outline!

How to use Outline, examples

Example:
.classNameHere {
outline: 1px solid #000000;
}
Example 2:
.classNameHere {
outline: 2px dotted #FF66CC;
}

I hope you enjoyed this little introduction to the Outline CSS property!