Outlining

We previously had a look at the border properties, which allows you to draw a border around an element. With the outline properties, you can get an extra border, for extra visual attention for your element. Outlining is just as easy to apply as a border - just have a look at this example for proof:

<style type="text/css">
.box {
	background-color: #eee;
	outline: 3px solid LightCoral;
	border: 3px solid LightBlue;
	padding: 5px 10px;
}
</style>

<div class="box">Hello, world!</div>

Differences between border and outline

From our first example, the border and outline properties may look identical, but there are actually a couple of pretty important differences:

· You cannot apply a different outline width, style and color for the four sides of an element, like you can with the border - the values provided will be used for all four sides of the element.

· The outline is not a part of the element's dimensions, like the border is, meaning that no matter how thick an outline you apply to the element, the dimensions of it won't change. This also means that the browser won't reserve the required space for your outline - you will need to make sure that it can fit it, without overlapping other elements.

Shorthand property

The outline property is a shorthand property (a subject we have already covered in greater details in the previous chapters) which translates into the outline-width, outline-style and outline-color properties. That obviously means that you can use the properties alone, if you want to:

<style type="text/css">
.box {
	background-color: #eee;
	border: 3px solid LightBlue;
	padding: 5px 10px;
	outline-width: 3px;
	outline-style: solid;
	outline-color: LightCoral;
}
</style>

<div class="box">Hello, world!</div>

It's just another way of doing the same thing we did in the first example.

Outline color

Just a plain old color property, where you can define the color for the outline in several different ways, as it is with all color related properties in CSS. Look elsewhere in this tutorial for a complete walkthrough of all the options you have when defining a color in CSS.

Outline width

Works much like margins and paddings - can be either an absolute value, like in this example, a relative value, or one of the pre-defined outline width values: Thin, medium or thick. If you use the pre-defined values, it's up to the browser to interpret them, which basically gives you less control of how your work will look across all the different devices and browsers.

Outline style

So far, we've just used the solid outline style, but just like for borders, there are quite a few to choose from: hidden,dotted, dashed, solid, double, groove, ridge, inset and outset. Let's see how they look:

<style type="text/css">
.box {
	outline-color: CornflowerBlue;
	outline-width: 4px;
	margin: 10px;
	float: left;
	border: 2px solid LightCoral;
	padding: 5px 10px;
}
</style>

<div class="box" style="outline-style: dashed;">Dashed</div>
<div class="box" style="outline-style: dotted;">Dotted</div>
<div class="box" style="outline-style: double;">Double</div>
<div class="box" style="outline-style: groove;">Groove</div>
<div class="box" style="outline-style: inset;">Inset</div>
<div class="box" style="outline-style: outset;">Outset</div>
<div class="box" style="outline-style: ridge;">Ridge</div>
<div class="box" style="outline-style: solid;">Solid</div>

Outline offset

A cool thing about outlines is that you can create a distance between it and the border, if you want to, by using the outline-offset property. It takes a CSS length unit and the empty space between the border (if there is any) and the outline will be transparent and thereby take the background color of the parent element. Here's an example:

<style type="text/css">
.box {
	background-color: #eee;
	outline: 3px solid LightCoral;
	outline-offset: 3px;
	border: 3px solid LightBlue;
	padding: 5px 10px;
}
</style>

<div class="box">Hello, world!</div>

However, please notice that the support for this property is currently a bit limited. As of writing, it is for instance not supported by any version of Internet Explorer, but support will likely be added in an upcoming version.

Summary

Using the outline properties, you can draw (an extra) border around an element, particularly used for extra visual attention. The outline works much like the border does, but with a couple of exceptions: You have to use the same width, style and color for all four sides and the space used by the outline is not reserved as a part of the element, like it is with the border.