html - multi colored border repeating possible with css?

Question

I've searched and can only find multiple border issues. I need to make one border with 4 colors that repeat.

<div id="wrapper" style="width:100%; background:#ccc; border-top: thick solid blue; border-bottom: thick solid blue; padding:10px;">
<div id="content">
This is some content.
</div>
</div>

http://jsfiddle.net/f7JT7/

I did everything inline so it's easier to understand

I'd like the border-top and bottom to be 4 different colors repeating.

1 2 3 4 1 2 3 4 1 2 3 4

Is this possible with css? I know i could do something like

<div>
<div id="red" style="width:50px;"></div><div id="green" style="margin-left:50px; width:50px;"></div><div id="purple" style="margin-left:100px; width:50px;"></div>
</div>

But i'd like to see if there is a better way of doing this with css? THanks.

This is a screen shot of my design

Answer 1

Actually, you can use pure CSS for this. You just need list item, then display to inline block, and add every list a different color.