Safari public beta and borders

This page demonstrates a slight CSS rendering bug in Apple's new Safari browser, based on a similar test page by Sylvan Korvus. The page renders correctly in Mac IE 5.2 and Mozilla.

The bug is that zero-width dotted or dashed borders show up as 1px dashed borders if any other side of the box has positive-sized borders. Zero-width borders of other styles are not affected. The workaround is to ensure that one is not defining zero-widths as a substitute for defining border-style:none.

Note also that the dotted borders appear dashed: dots should be square or round, not elongated. This is the same glitch as Windows IE.

1. This box should have a solid border on each side. It has the following styles: 
 border-color: black;
 border-width: 1px;
 border-style: solid;
Safari does this right.
2. This box should have a solid border on the top and bottom only. It has the following styles: 
 border-color: black;
 border-width: 1px 0px 1px 0px;
 border-style: solid;
Safari does this right.

3. This box should have a dotted border on each side. It has the following styles: 
 border-color: black;
 border-width: 1px 1px 1px 1px;
 border-style: dotted;
Safari does this right, except that dotted borders have that Windows IE dashed look.
4. This box should have a dotted border on the top and bottom only. It has the following styles: 
	border-color: black;
 border-width: 1px 0px 1px 0px;
 border-style: dotted;
Safari draws the border on all sides. Note that the only difference between this DIV and DIV 2 above is the change in border-style.

Different border styles

4a. This is dotted, with thicker, gray top and bottom borders to make the subsequent tests more visible. Note the placement issue on the thick borders.
4b. This is doubled. No problem here.
4c. This is dashed. Safari has a problem.
4d. This is ridged. No problem here.
4e. This is grooved. No problem here.
4f. This is inset. No problem here.
4g. This is outset. No problem here.

Different style syntax

5a. Now we expand the border-width syntax to see if that makes a difference. 
 border-color: black;
 border-style: dotted;
 border-top-width: 1px;
 border-bottom-width:1px;
 border-left-width:0px;
 border-right-width:0px;
5b. A different kind of condensed width notation. We still encounter the same problem. 
 border-color: black;
 border-style: dotted;
 border-width: 10px 0px;
5c. Now condensed by side not property, still the same problem. 
 border-top: 1px dotted black;
 border-bottom: 1px dotted black;
 border-left: 0px dotted black;
 border-right: 0px dotted black;
5d. Different units for the zero width sides don't make a difference either. 
 border-color: black;
 border-style: dotted;
 border-width: 1px 0em;
5d. The same problem occurs even if the real borders are not themselves dotted or dashed. 
 border-color: black;
 border-style: solid dotted;
 border-width: 1px 0px;

Some fixes

6. This box should have a dotted border on the top and bottom only, and does because we have explicitly set the side borders to have style of "none". 
 border-color: black;
 border-width: 1px 0px 1px 0px;
 border-style: dotted none dotted none;
7. This box should have no dotted borders, but because of the bug above, it's expected to render with borders. Surprise! But as soon as you set any border side to 1px, the border appears on all sides.

Acknowledgements: This test page is an expanded version of one by Sylvan Korvus.