The outline of a box is almost the same as the border. Unfortunately the four browsers that support it use three 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, you can only define a general outline, adding special instructions for one side of the
outline (like outline-left-width
) is not possible.
Mozilla also supports outline, but with proprietary syntax: -moz-outline
.
In addition its outline looks radically different from Explorer 5 Mac. As far as I understand
Mozilla is closer to the specs, but I'm not totally sure.
<p class="test">
<p class="test">
p.test { outline-width: 5px; outline-style: solid; outline-color: #000000; -moz-outline-width: 5px; -moz-outline-style: solid; -moz-outline-color: #000000; border-width: 5px; border-style: solid; border-color: #cc0000; }
Explorer 5 Mac and Opera 7 show this:
while Mozilla shows this:
Completely different effects.