title: Multi color border for table Cell
body: <p>For certain table cells i would like to have a multi colored top-border or bottom-border.</p>
  <p>Based on <a href="https://stackoverflow.com/questions/38850419/">how-to-create-multi-color-border-with-css</a> and <a href="https://stackoverflow.com/questions/39239808/">css-multi-color-border</a> i was able to create a multi color border.</p>
  <p>The problem is that i want to combine it for a table cell <code>td</code> where some cells have a normal border and others have a multi color border.</p>
  <p>This code below sets the multi color for a cell but as soon as a i want to add black borders for &quot;normal&quot; cells it overwrites the multi color border (see <a href="https://codepen.io/codemuggle/pen/jOygmeG" rel="nofollow noreferrer">codepen</a>)</p>
  <pre><code>&lt;style&gt;
  
  .works  .gap-from {
    text-align:center;
    border-bottom: 4px solid;
    border-image:  linear-gradient(to right, lightgrey 40%, yellow 40%) 1;
  }
  &lt;/style&gt;
  
  
  &lt;table class=&quot;works&quot;&gt;
    &lt;tr&gt;&lt;td&gt;no color border&lt;/td&gt;&lt;td class=&quot;gap-from&quot;&gt;without span&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;span class=&quot;gap-from&quot;&gt;with span&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;  
  &lt;/table&gt;
  </code></pre>
  <p>It seems to  make it partly work a background color must be set for the table. But this leads to thick border lines.</p>
  <pre><code>table.works {background-color: black;}
  table.works colgroup {background-color: white;}
  </code></pre>
  <p><a href="https://i.stack.imgur.com/jiS6t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jiS6t.png" alt="partly working example" /></a>
  FYI: the <a href="https://ux.stackexchange.com/questions/138581/">purpose is to visualize date overlaps and date gaps</a>.</p>
  <h3>Question</h3>
  <p>What can be done to have</p>
  <ul>
  <li>normal thin borders for every cell</li>
  <li>multi color borders for certain cells</li>
  <li>without using additional markup (an additional span)?</li>
  </ul>