Outline

If you have any comments to make regarding this test, e-mail ian@hixie.ch.

Prerequisites
Browsers that are subjected to this test should support CSS1 and the CSS2 outlines-* properties.

1. Simple

As usual, we start with a simple test. The following text should have an outline that spans the viewport (with a modest 3em margin on the left and on the right).

This should have a solid medium, inverted outline.

2. Position

The outline should start "just outside the border". Thus, below there should be a blue box, containing at its top a band of red, below which there should sit a lime box, containing a band of yellow, a band aqua, and a band of fuschsia. Each band should be exactly the same thickness, namely, 8 pixels.

The above should thus look identical (to the pixel) to this:

Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline is the minimum outline that encloses all the element's boxes. In contrast to borders, the outline is not open at the line box's end or start, but is always fully connected. That comes straight from CSS2. Well, lets test it:

text text text OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED text OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text OUTLINED OUTLINED text text text text text text text text text text text text text text text OUTLINED OUTLINED OUTLINED text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED OUTLINED text

3. Thorough

Now for some thorough testing.

1px none invert
1px none red
1px none lime
1px none aqua
1px none yellow
1px none blue
1px dotted invert
1px dotted red
1px dotted lime
1px dotted aqua
1px dotted yellow
1px dotted blue
1px dashed invert
1px dashed red
1px dashed lime
1px dashed aqua
1px dashed yellow
1px dashed blue
1px solid invert
1px solid red
1px solid lime
1px solid aqua
1px solid yellow
1px solid blue
1px double invert
1px double red
1px double lime
1px double aqua
1px double yellow
1px double blue
1px groove invert
1px groove red
1px groove lime
1px groove aqua
1px groove yellow
1px groove blue
1px ridge invert
1px ridge red
1px ridge lime
1px ridge aqua
1px ridge yellow
1px ridge blue
1px inset invert
1px inset red
1px inset lime
1px inset aqua
1px inset yellow
1px inset blue
1px outset invert
1px outset red
1px outset lime
1px outset aqua
1px outset yellow
1px outset blue
4px none invert
4px none red
4px none lime
4px none aqua
4px none yellow
4px none blue
4px dotted invert
4px dotted red
4px dotted lime
4px dotted aqua
4px dotted yellow
4px dotted blue
4px dashed invert
4px dashed red
4px dashed lime
4px dashed aqua
4px dashed yellow
4px dashed blue
4px solid invert
4px solid red
4px solid lime
4px solid aqua
4px solid yellow
4px solid blue
4px double invert
4px double red
4px double lime
4px double aqua
4px double yellow
4px double blue
4px groove invert
4px groove red
4px groove lime
4px groove aqua
4px groove yellow
4px groove blue
4px ridge invert
4px ridge red
4px ridge lime
4px ridge aqua
4px ridge yellow
4px ridge blue
4px inset invert
4px inset red
4px inset lime
4px inset aqua
4px inset yellow
4px inset blue
4px outset invert
4px outset red
4px outset lime
4px outset aqua
4px outset yellow
4px outset blue
8px none invert
8px none red
8px none lime
8px none aqua
8px none yellow
8px none blue
8px dotted invert
8px dotted red
8px dotted lime
8px dotted aqua
8px dotted yellow
8px dotted blue
8px dashed invert
8px dashed red
8px dashed lime
8px dashed aqua
8px dashed yellow
8px dashed blue
8px solid invert
8px solid red
8px solid lime
8px solid aqua
8px solid yellow
8px solid blue
8px double invert
8px double red
8px double lime
8px double aqua
8px double yellow
8px double blue
8px groove invert
8px groove red
8px groove lime
8px groove aqua
8px groove yellow
8px groove blue
8px ridge invert
8px ridge red
8px ridge lime
8px ridge aqua
8px ridge yellow
8px ridge blue
8px inset invert
8px inset red
8px inset lime
8px inset aqua
8px inset yellow
8px inset blue
8px outset invert
8px outset red
8px outset lime
8px outset aqua
8px outset yellow
8px outset blue
0.2in none invert
0.2in none red
0.2in none lime
0.2in none aqua
0.2in none yellow
0.2in none blue
0.2in dotted invert
0.2in dotted red
0.2in dotted lime
0.2in dotted aqua
0.2in dotted yellow
0.2in dotted blue
0.2in dashed invert
0.2in dashed red
0.2in dashed lime
0.2in dashed aqua
0.2in dashed yellow
0.2in dashed blue
0.2in solid invert
0.2in solid red
0.2in solid lime
0.2in solid aqua
0.2in solid yellow
0.2in solid blue
0.2in double invert
0.2in double red
0.2in double lime
0.2in double aqua
0.2in double yellow
0.2in double blue
0.2in groove invert
0.2in groove red
0.2in groove lime
0.2in groove aqua
0.2in groove yellow
0.2in groove blue
0.2in ridge invert
0.2in ridge red
0.2in ridge lime
0.2in ridge aqua
0.2in ridge yellow
0.2in ridge blue
0.2in inset invert
0.2in inset red
0.2in inset lime
0.2in inset aqua
0.2in inset yellow
0.2in inset blue
0.2in outset invert
0.2in outset red
0.2in outset lime
0.2in outset aqua
0.2in outset yellow
0.2in outset blue
0.5em none invert
0.5em none red
0.5em none lime
0.5em none aqua
0.5em none yellow
0.5em none blue
0.5em dotted invert
0.5em dotted red
0.5em dotted lime
0.5em dotted aqua
0.5em dotted yellow
0.5em dotted blue
0.5em dashed invert
0.5em dashed red
0.5em dashed lime
0.5em dashed aqua
0.5em dashed yellow
0.5em dashed blue
0.5em solid invert
0.5em solid red
0.5em solid lime
0.5em solid aqua
0.5em solid yellow
0.5em solid blue
0.5em double invert
0.5em double red
0.5em double lime
0.5em double aqua
0.5em double yellow
0.5em double blue
0.5em groove invert
0.5em groove red
0.5em groove lime
0.5em groove aqua
0.5em groove yellow
0.5em groove blue
0.5em ridge invert
0.5em ridge red
0.5em ridge lime
0.5em ridge aqua
0.5em ridge yellow
0.5em ridge blue
0.5em inset invert
0.5em inset red
0.5em inset lime
0.5em inset aqua
0.5em inset yellow
0.5em inset blue
0.5em outset invert
0.5em outset red
0.5em outset lime
0.5em outset aqua
0.5em outset yellow
0.5em outset blue
thin none invert
thin none red
thin none lime
thin none aqua
thin none yellow
thin none blue
thin dotted invert
thin dotted red
thin dotted lime
thin dotted aqua
thin dotted yellow
thin dotted blue
thin dashed invert
thin dashed red
thin dashed lime
thin dashed aqua
thin dashed yellow
thin dashed blue
thin solid invert
thin solid red
thin solid lime
thin solid aqua
thin solid yellow
thin solid blue
thin double invert
thin double red
thin double lime
thin double aqua
thin double yellow
thin double blue
thin groove invert
thin groove red
thin groove lime
thin groove aqua
thin groove yellow
thin groove blue
thin ridge invert
thin ridge red
thin ridge lime
thin ridge aqua
thin ridge yellow
thin ridge blue
thin inset invert
thin inset red
thin inset lime
thin inset aqua
thin inset yellow
thin inset blue
thin outset invert
thin outset red
thin outset lime
thin outset aqua
thin outset yellow
thin outset blue
medium none invert
medium none red
medium none lime
medium none aqua
medium none yellow
medium none blue
medium dotted invert
medium dotted red
medium dotted lime
medium dotted aqua
medium dotted yellow
medium dotted blue
medium dashed invert
medium dashed red
medium dashed lime
medium dashed aqua
medium dashed yellow
medium dashed blue
medium solid invert
medium solid red
medium solid lime
medium solid aqua
medium solid yellow
medium solid blue
medium double invert
medium double red
medium double lime
medium double aqua
medium double yellow
medium double blue
medium groove invert
medium groove red
medium groove lime
medium groove aqua
medium groove yellow
medium groove blue
medium ridge invert
medium ridge red
medium ridge lime
medium ridge aqua
medium ridge yellow
medium ridge blue
medium inset invert
medium inset red
medium inset lime
medium inset aqua
medium inset yellow
medium inset blue
medium outset invert
medium outset red
medium outset lime
medium outset aqua
medium outset yellow
medium outset blue
thick none invert
thick none red
thick none lime
thick none aqua
thick none yellow
thick none blue
thick dotted invert
thick dotted red
thick dotted lime
thick dotted aqua
thick dotted yellow
thick dotted blue
thick dashed invert
thick dashed red
thick dashed lime
thick dashed aqua
thick dashed yellow
thick dashed blue
thick solid invert
thick solid red
thick solid lime
thick solid aqua
thick solid yellow
thick solid blue
thick double invert
thick double red
thick double lime
thick double aqua
thick double yellow
thick double blue
thick groove invert
thick groove red
thick groove lime
thick groove aqua
thick groove yellow
thick groove blue
thick ridge invert
thick ridge red
thick ridge lime
thick ridge aqua
thick ridge yellow
thick ridge blue
thick inset invert
thick inset red
thick inset lime
thick inset aqua
thick inset yellow
thick inset blue
thick outset invert
thick outset red
thick outset lime
thick outset aqua
thick outset yellow
thick outset blue

Submit Results

How does your browser fare on this test?

Up to the Evil Tests Page.

Last updated in March 1999.