<table class="comparison-table">
  <thead>
    <tr>
      <th scope="col">Method</th>
      <th scope="col">Ease</th>
      <th scope="col">Performance</th>
      <th scope="col">Animation</th>
      <th scope="col">Pro's</th>
      <th scope="col">Con's</th>
    </tr>					
  </thead>
  <tbody>
    <tr>
      <th scope="row">border</th>
      <td><span class="rating rating--5">5</span></td>
      <td><span class="rating rating--1">1</span></td>
      <td><span class="rating rating--2">2</span></td>
      <td>
        <ul>
          <li>Easy</li>
        </ul></td>
      <td>
        <ul>
          <li>Bad performance</li>
          <li>Triggers layout and can move elements around</li>
          <li>Stepped transition due to browser rounding.</li>
        </ul>
      </td>
    </tr>
    <tr>
      <th scope="row">outline</th>
      <td><span class="rating rating--5">5</span></td>
      <td><span class="rating rating--5">5</span></td>
      <td><span class="rating rating--3">3</span></td>
      <td>
        <ul>
          <li>Easy</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>Stepped transition due to browser rounding</li>
          <li>Glitches in Safari</li>
        </ul>
      </td>
    </tr>
    <tr>
      <th scope="row">clip-path</th>
      <td><span class="rating rating--2">2</span></td>
      <td><span class="rating rating--3">3</span></td>
      <td><span class="rating rating--5">5</span></td>
      <td>
        <ul>
          <li>Smooth transitions</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>Potential for rounding errors</li>
          <li>Difficult to set up</li>
          <li>No IE/Edge support</li>
        </ul>
      </td>
    </tr>	
    <tr>
      <th scope="row">linear-gradient</th>
      <td><span class="rating rating--1">1</span></td>
      <td><span class="rating rating--4">4</span></td>
      <td><span class="rating rating--3">3</span></td>
      <td>
        <ul>
          <li>Smooth transitions in most browsers</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>Stepped transition in Chrome</li>
          <li>Very difficult to set up</li>
          <li>No IE/Edge animation</li>
        </ul>
      </td>
    </tr>
    <tr>
      <th scope="row">box-shadow</th>
      <td><span class="rating rating--4">4</span></td>
      <td><span class="rating rating--4">4</span></td>
      <td><span class="rating rating--4">4</span></td>
      <td>
        <ul>
          <li>Easy</li>
          <li>Smooth transitions in most browsers</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>Stepped transition in Safari</li>
        </ul>
      </td>
    </tr>	
  </tr>
</tbody>
</table>