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.

Answer 2

I created a CodePen example showing one way of doing this with CSS border-image. It's fairly well supported and does what you are looking for with CSS.

HTML:

<div class="fancy-border">
  my content
</div>

CSS:

.fancy-border {
  border: 4px solid;
  border-image: url("http://s12.postimg.org/kebji5qfd/border.png") 1 stretch repeat;
}

Chris Coyier has a nice post at CSS Tricks about border-image. http://css-tricks.com/understanding-border-image/