Outline

  • outline is supported by Explorer 5 on Mac, Mozilla and Opera 7.
  • In Safari the outline goes directly around the text, not around the border.

    •  

    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

    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.

    Example

    <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.

    Contents