Dots vs. dashes

The border-style definition [1] gives only the most cursory  
definition of dotted and dashed border-styles, as being a series of  
dots or dashes. It doesn't say anything about the shape of the dot,  
but shows an illustration of the dot being round. It seems reasonable  
that dots should be round and that dashes rectangular, as the  
illustration shows.

Oxfords defines a dot as "a small round mark or spot". So, it would  
seem that "round" is a key aspect of what makes something a dot. Yet  
in my tests, both Safari and Opera had square dots. Can clarification  
be added to the spec, to the effect of "dots should be round, when  
the width of the border is large enough to distinguish round from  
square (more than 3px thick, for instance)"?

Also, the spec says that "Implementations are encouraged to choose a  
spacing that makes the corners symmetrical." To my mind, this means  
that in terms of how the dots meet up in the corners, the left  
corners should be mirror images of the right corners, and the top  
corners should be mirror images of the bottom corners. But while this  
is true in Safari, it is not true in Opera or FireFox. Opera slices  
off the line in a diagonal, wherever it happens to be in the dot- 
space sequence, and FireFox follows some other rule that results in  
some rather interesting shapes.

It seems to me that in order to follow the recommendation, that the  
horizontal borders with dots or dashes should be centered  
horizontally, and vertical borders with dots or dashes should be  
centered vertically, as Safari does it. Alternately (and preferably),  
the browser could adjust the size of the spacing of the dots to  
insure symmetry (IE7 seems to do this, and it works well).

The browsers I tested all looked very different from each other when  
a large border width was used with a dotted border-style. This may  
not matter as much on a small screen, but would be more noticeable  
when printed in high resolution, or when using extra large displays  
with a few large page elements (such as with an electronic  
billboard). I created a page to show the differences:

http://www.bradclicks.com/cssplay/bigdots.html




[1]  CSS3 border-style definition: http://www.w3.org/TR/2005/WD-css3- 
background-20050216/#the-border-style

Received on Monday, 28 January 2008 03:38:35 UTC