outline is supported in one way by Explorer 5 on Mac, Safari and Opera 7, and in another way by Mozilla.

The outline of a box is almost the same as the border. Unfortunately the four browsers that support it use three radically different definitions of outline.

The outline is not actually a part of the box, it does not count in any way towards the width or height of a box.

Its syntax is the same as for the border: width, style and color.

Unlike a border, adding special instructions for one side of the outline (like outline-left-width) is not possible. You can define only a complete outline around the entire element.

Mozilla once again needs proprietary syntax: -moz-outline.


p.test {
	outline: 3px solid #AD007B;
	-moz-outline: 3px solid #AD007B;
	border: 1px solid #000000;

<p class="test">

The results

Results of my outline test. Be glad you don't see them

An excellent example of browser incompatibility. Having read the spec, I think that Explorer Mac and Opera are closest to the correct implementation, but I'm not sure. In any case outline is unusable at the moment.

Update: "Safari" in the screenshot above is 1.0. Version 1.2 has adopted the Explorer Mac/Opera variant.