title: How best highlight (red border, outline, etc) a table cell. without taking up extra space
body: <p>How can I best highlight a cell in a table, without taking up additional space. Just setting the background color is not good enough. (as it has to be a light color for the number/text to be readable).</p>
  
  <p>CSS Outline would be OK if it could have rounded corners, but without them it doesn't have the same look/style as the rest of the document.
  The best I have so far is putting a border around an absolute element positioned over the cell.  But this requires the extra element, AND it's positioned OVER, not UNDER, so the color needs to have opacity, in case it is over text in adjacent cells.</p>
  
  <pre><code>&lt;style&gt;
  td {
      vertical-align:top; position:relative; text-align:right;
  }
  .bordered { 
  position: absolute;width:calc(100% + 20px)!important;left:-10px;top:-5px;border:6px rgba(255,0,0,0.7)solid;border-radius:8px;width:200%;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;table style="width: 100%"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;span class="bordered"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;1&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&lt;span class="bordered"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;123&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;1234&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&lt;span class="bordered"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;123456789&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>a) Can Outline have rounded corners?</p>
  
  <p>b) Can above be done without the extra  element?</p>
  
  <p>c) Can above be positioned Under, rather than Over the cell?</p>
  
  <p>Background:
  I have an html app.  that produces a 'Picking List' (for operatives to pick the right products for an Order.  It has a 'Quantity' field which css highlights yellow when it's greater than ONE (but operatives don't notice it - and just despatch one (which is the usual qty).
  css highlights with a background Yellow - if we use Red - it's difficult to read the number (which is in black).</p>
  
  <p>No cross-browser issues as operatives just use Chrome internally.</p>