title: multi colored border repeating possible with css?
body: <p>I've searched and can only find multiple border issues. I need to make one border with 4 colors that repeat. </p>
  
  <pre><code>&lt;div id="wrapper" style="width:100%; background:#ccc; border-top: thick solid blue; border-bottom: thick solid blue; padding:10px;"&gt;
  &lt;div id="content"&gt;
  This is some content.
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/f7JT7/" rel="noreferrer">http://jsfiddle.net/f7JT7/</a></p>
  
  <p>I did everything inline so it's easier to understand</p>
  
  <p>I'd like the border-top and bottom to be 4 different colors repeating.</p>
  
  <p>1 2 3 4 1 2 3 4 1 2 3 4</p>
  
  <p>Is this possible with css? I know i could do something like </p>
  
  <pre><code>&lt;div&gt;
  &lt;div id="red" style="width:50px;"&gt;&lt;/div&gt;&lt;div id="green" style="margin-left:50px; width:50px;"&gt;&lt;/div&gt;&lt;div id="purple" style="margin-left:100px; width:50px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But i'd like to see if there is a better way of doing this with css? THanks.</p>
  
  <p><img src="https://i.stack.imgur.com/Wdzlt.png" alt="This is the border i&#39;m looking for"></p>
  
  <p>This is a screen shot of my design</p>