If I wanted to make a horizontal line, I would do this:
Instead of using the border, use a tiled background image.
I do not think there is a solution that get's away without using a graphics file and that also works in all browsers.
If you are brave you can try this:http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
It allows to draw on the canvas in HTML5, but it would not work on older browsers.
if you can add a lot of html you can use this: http://jsfiddle.net/QsM4J/
HTML:
before
after
CSS:
#sqig{
position:relative;
width:400px;
height:6px;
}
#sqig div{
position:relative;
width:6px;
height:6px;
display: inline-block;
margin:0 0 0 -4px;
padding:0;
}
#sqig .topsqig div{
border-radius: 3px;
top:1px;
border-top: 1px solid #000;
}
#sqig .bottomsqig div{
border-radius: 3px;
top:-1px;
border-bottom: 1px solid #000;
}