<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rounded Corners - CSS Backgrounds and Borders Module Level 3 CR Test Suite</title>
  <style type="text/css">
    @import "http://www.w3.org/StyleSheets/TR/base.css";
    @import "../indices.css";
  </style>
 </head>

 <body>

  <h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
  <h2>Rounded Corners (108 tests)</h2>
  <table width="100%">
    <col id="test-column"></col>
    <col id="refs-column"></col>
    <col id="flags-column"></col>
    <col id="info-column"></col>
    <thead>
      <tr>
        <th>Test</th>
        <th><abbr title="Rendering References">Refs</abbr></th>
        <th>Flags</th>
        <th>Info</th>
      </tr>
    </thead>
    <tbody id="s5">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s5">+</a>
        <a href="http://www.w3.org/TR/css3-background/#corners">5 Rounded Corners</a></th></tr>
      <!-- 0 tests -->
    </tbody>
    <tbody id="s5.1">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s5.1">+</a>
        <a href="http://www.w3.org/TR/css3-background/#the-border-radius">5.1 Curve Radii: the &#8216;border-radius&#8217; properties</a></th></tr>
      <!-- 71 tests -->
      <tr id="border-bottom-left-radius-001-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-001.xht">border-bottom-left-radius-001</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using 0 value
          <ul class="assert">
            <li>To verify the border-bottom-left-radius property, when set with 0, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-002-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-002.xht">border-bottom-left-radius-002</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using one length value: 25px
          <ul class="assert">
            <li>To verify if border-bottom-left-radius property set to one length value, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-003-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-003.xht">border-bottom-left-radius-003</a></strong></td>
        <td><a href="border-bottom-left-radius-004.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using two length values: 40px 20px
          <ul class="assert">
            <li>To verify border-bottom-left-radius property set to two length values, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-004-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-004.xht">border-bottom-left-radius-004</a></strong></td>
        <td><a href="border-bottom-left-radius-003.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using one percentage value: 20%
          <ul class="assert">
            <li>To verify border-bottom-left-radius property set to percentage value, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-005-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-005.xht">border-bottom-left-radius-005</a></strong></td>
        <td><a href="border-bottom-left-radius-006.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using two percentage values: 20% 30%
          <ul class="assert">
            <li>To verify border-bottom-left-radius property set to two precentage value, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-006-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-006.xht">border-bottom-left-radius-006</a></strong></td>
        <td><a href="border-bottom-left-radius-005.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using two values: 40px 30%
          <ul class="assert">
            <li>To verify border-bottom-left-radius property set to two values in different unit, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-007-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-007.xht">border-bottom-left-radius-007</a></strong></td>
        <td><a href="border-bottom-left-radius-009.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using two values: 20% 25px
          <ul class="assert">
            <li>To verify border-bottom-left-radius property set to two values in different unit, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-008-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-008.xht">border-bottom-left-radius-008</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using two values: 4em 30%
          <ul class="assert">
            <li>To verify border-bottom-left-radius property set to two values in different units, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-009-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-009.xht">border-bottom-left-radius-009</a></strong></td>
        <td><a href="border-bottom-left-radius-007.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using &quot;inherit&quot;
          <ul class="assert">
            <li>To verify if inherit feature works, when assigned to border-bottom-left-radius</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-010-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-010.xht">border-bottom-left-radius-010</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using one length value: 25px 0
          <ul class="assert">
            <li>To verify border-bottom-left-radius property set to one length value, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-011-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-011.xht">border-bottom-left-radius-011</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using one length value: 0 3em
          <ul class="assert">
            <li>To verify border-bottom-left-radius property set to one length value, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-012-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-012.xht">border-bottom-left-radius-012</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using two length values: 0.5in 10mm
          <ul class="assert">
            <li>To verify border-bottom-left-radius property set to two length values (with diferent units), works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-013-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-013.xht">border-bottom-left-radius-013</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using two length values: 40pt 2pc
          <ul class="assert">
            <li>To verify border-bottom-left-radius property set to two length values (with different units), works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-left-radius-014-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-left-radius-014.xht">border-bottom-left-radius-014</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-left-radius using two length values: 50px -25px
          <ul class="assert">
            <li>To verify if one length value is negative in border-bottom-left-radius, then the corner is not rounded.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-001-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-001.xht">border-bottom-right-radius-001</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using 0 value
          <ul class="assert">
            <li>To verify border-bottom-right-radius property, when set with 0, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-002-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-002.xht">border-bottom-right-radius-002</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using one length value: 25px
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set with one length value, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-003-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-003.xht">border-bottom-right-radius-003</a></strong></td>
        <td><a href="border-bottom-right-radius-004.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using two length values: 40px 20px
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set with two length values, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-004-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-004.xht">border-bottom-right-radius-004</a></strong></td>
        <td><a href="border-bottom-right-radius-003.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using one percentage value: 20%
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set with one percentage value, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-005-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-005.xht">border-bottom-right-radius-005</a></strong></td>
        <td><a href="border-bottom-right-radius-006.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using two percentage value: 20% 30%
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set with two percentage value works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-006-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-006.xht">border-bottom-right-radius-006</a></strong></td>
        <td><a href="border-bottom-right-radius-005.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using two value: 40px 30%
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set to two value with different unit, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-007-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-007.xht">border-bottom-right-radius-007</a></strong></td>
        <td><a href="border-bottom-right-radius-009.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using two value: 20% 25px
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set to two value with different unit, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-008-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-008.xht">border-bottom-right-radius-008</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using two values: 4em 30%
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set to two values with different units, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-009-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-009.xht">border-bottom-right-radius-009</a></strong></td>
        <td><a href="border-bottom-right-radius-007.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using &quot;inherit&quot;
          <ul class="assert">
            <li>To verify if inherit feature works, when assigned to &quot;borderbottomrightradius&quot; property</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-010-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-010.xht">border-bottom-right-radius-010</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using one length value: 25px 0
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set with one length value, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-011-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-011.xht">border-bottom-right-radius-011</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using one length value: 0 3em
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set with one length value, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-012-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-012.xht">border-bottom-right-radius-012</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using two length values: 0.5in 10mm
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set with two values (with different units), works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-013-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-013.xht">border-bottom-right-radius-013</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using two length values: 40pt 2pc
          <ul class="assert">
            <li>To verify border-bottom-right-radius property set with two values (with different units), works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-bottom-right-radius-014-5.1" class="primary">
        <td><strong>
            <a href="border-bottom-right-radius-014.xht">border-bottom-right-radius-014</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-bottom-right-radius using two length values: 50px -25px
          <ul class="assert">
            <li>To verify if one length value is negative in border-bottom-right-radius, then the corner is not rounded.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-001-5.1" class="primary">
        <td><strong>
            <a href="border-radius-001.xht">border-radius-001</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>To verify when border-radius property, when set to zero, works as expected.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-002-5.1" class="primary">
        <td><strong>
            <a href="border-radius-002.xht">border-radius-002</a></strong></td>
        <td><a href="reference/border-radius-002-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>To verify border-radius property set with one length value, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-003-5.1" class="primary">
        <td><strong>
            <a href="border-radius-003.xht">border-radius-003</a></strong></td>
        <td><a href="reference/border-radius-003-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>To verify border-radius property set with one length value along with a zero, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-004-5.1" class="primary">
        <td><strong>
            <a href="border-radius-004.xht">border-radius-004</a></strong></td>
        <td><a href="reference/border-radius-004-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>To verify border-radius property set with value using slash, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-005-5.1" class="primary">
        <td><strong>
            <a href="border-radius-005.xht">border-radius-005</a></strong></td>
        <td><a href="reference/border-radius-005-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>To verify border-radius property set with value using slash, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-006-5.1" class="primary">
        <td><strong>
            <a href="border-radius-006.xht">border-radius-006</a></strong></td>
        <td><a href="reference/border-radius-006-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>To verify border-radius property set with values using slash, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-007-5.1" class="primary">
        <td><strong>
            <a href="border-radius-007.xht">border-radius-007</a></strong></td>
        <td><a href="reference/border-radius-007-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>To verify border-radius property set with values (in different units) using slash, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-008-5.1" class="primary">
        <td><strong>
            <a href="border-radius-008.xht">border-radius-008</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>To verify border-radius property set with excess values, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-009-5.1" class="primary">
        <td><strong>
            <a href="border-radius-009.xht">border-radius-009</a></strong></td>
        <td><a href="reference/border-radius-009-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>To verify inherit feature works, when it is assigned to border-radius</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-010-5.1" class="primary">
        <td><strong>
            <a href="border-radius-010.xht">border-radius-010</a></strong></td>
        <td><a href="reference/border-radius-010-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>To verify inherit feature works, when it is assigned to border-radius</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-011-5.1" class="primary">
        <td><strong>
            <a href="border-radius-011.xht">border-radius-011</a></strong></td>
        <td><a href="reference/border-radius-011-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. border
          <ul class="assert">
            <li>If border-radius is zero, all corners are square.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-horizontal-value-is-zero-5.1" class="primary">
        <td><strong>
            <a href="border-radius-horizontal-value-is-zero.xht">border-radius-horizontal-value-is-zero</a></strong></td>
        <td><a href="reference/border-radius-horizontal-value-is-zero-ref.xht">=</a> </td>
        <td></td>
        <td>border-radius property if horizontal value is zero
          <ul class="assert">
            <li>If the horizontal radius length is zero, the corner is square, not rounded.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-001-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-001.xht">border-top-left-radius-001</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-left-radius using 0 value
          <ul class="assert">
            <li>To verify if the border-top-left-radius property, when set with 0, works as expected.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-002-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-002.xht">border-top-left-radius-002</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-top-left-radius using one length value: 25px
          <ul class="assert">
            <li>To verify border-top-left-radius property set to one length value, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-003-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-003.xht">border-top-left-radius-003</a></strong></td>
        <td><a href="border-top-left-radius-004.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-left-radius using two length values: 40px 20px
          <ul class="assert">
            <li>To verify border-top-left-radius property set to two length values, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-004-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-004.xht">border-top-left-radius-004</a></strong></td>
        <td><a href="border-top-left-radius-003.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-left-radius using one percentage value: 20%
          <ul class="assert">
            <li>To verify border-top-left-radius property set to one percentage value, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-005-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-005.xht">border-top-left-radius-005</a></strong></td>
        <td><a href="border-top-left-radius-006.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-left-radius using two percentage values: 20% 30%
          <ul class="assert">
            <li>To verify border-top-left-radius property set to two percentage values, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-006-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-006.xht">border-top-left-radius-006</a></strong></td>
        <td><a href="border-top-left-radius-005.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-left-radius using two values: 40px 30%
          <ul class="assert">
            <li>To verify border-top-left-radius property set to two values with different units, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-007-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-007.xht">border-top-left-radius-007</a></strong></td>
        <td><a href="border-top-left-radius-009.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-left-radius using two values: 20% 25px
          <ul class="assert">
            <li>To verify border-top-left-radius property set to two values with different units, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-008-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-008.xht">border-top-left-radius-008</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-top-left-radius using two values: 4em 30%
          <ul class="assert">
            <li>To verify border-top-left-radius property set to two values with different units, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-009-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-009.xht">border-top-left-radius-009</a></strong></td>
        <td><a href="border-top-left-radius-007.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-left-radius using &quot;inherit&quot;
          <ul class="assert">
            <li>To verify inherit feature works, when it is assigned to border-top-left-radius.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-010-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-010.xht">border-top-left-radius-010</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-left-radius using one length value: 25px 0
          <ul class="assert">
            <li>To verify if either length is 0, then the corner is not rounded.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-011-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-011.xht">border-top-left-radius-011</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-left-radius using one length value: 0 3em
          <ul class="assert">
            <li>To verify if either length is 0, then the corner is not rounded.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-012-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-012.xht">border-top-left-radius-012</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-top-left-radius using two length values: 0.5in 10mm
          <ul class="assert">
            <li>To verify border-top-left-radius property set to two length values (with different units), works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-013-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-013.xht">border-top-left-radius-013</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-top-left-radius using two length values: 40pt 2pc
          <ul class="assert">
            <li>To verify border-top-left-radius property set to two length values (with different units), works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-014-5.1" class="primary">
        <td><strong>
            <a href="border-top-left-radius-014.xht">border-top-left-radius-014</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-left-radius using two length values: 50px -25px
          <ul class="assert">
            <li>To verify if one length value is negative in border-top-left-radius, then the corner is not rounded.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-001-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-001.xht">border-top-right-radius-001</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-right-radius using 0 value
          <ul class="assert">
            <li>To verify if the border-top-right-radius property, when set with 0, works as expected</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-002-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-002.xht">border-top-right-radius-002</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-top-right-radius using one length value: 25px
          <ul class="assert">
            <li>To verify border-top-right-radius property set to one length value, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-003-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-003.xht">border-top-right-radius-003</a></strong></td>
        <td><a href="border-top-right-radius-004.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-right-radius using two length values: 40px 20px
          <ul class="assert">
            <li>To verify border-top-right-radius property set to two length values, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-004-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-004.xht">border-top-right-radius-004</a></strong></td>
        <td><a href="border-top-right-radius-003.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-right-radius using one percentage value: 20%
          <ul class="assert">
            <li>To verify border-top-right-radius property set to one percentage value, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-005-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-005.xht">border-top-right-radius-005</a></strong></td>
        <td><a href="border-top-right-radius-006.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-right-radius using two percentage values: 20% 30%
          <ul class="assert">
            <li>To verify border-top-right-radius property set to two percentage values, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-006-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-006.xht">border-top-right-radius-006</a></strong></td>
        <td><a href="border-top-right-radius-005.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-right-radius using two values: 40px 30%
          <ul class="assert">
            <li>To verify border-top-right-radius property set to two values with different units, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-007-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-007.xht">border-top-right-radius-007</a></strong></td>
        <td><a href="border-top-right-radius-009.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-right-radius using two values: 20% 25px
          <ul class="assert">
            <li>To verify border-top-right-radius property set to two values with different units, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-008-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-008.xht">border-top-right-radius-008</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-top-right-radius using two values: 4em 30%
          <ul class="assert">
            <li>To verify border-top-right-radius property set to two values with different units, works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-009-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-009.xht">border-top-right-radius-009</a></strong></td>
        <td><a href="border-top-right-radius-007.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-right-radius using &quot;inherit&quot;
          <ul class="assert">
            <li>To verify inherit feature works, when it is assigned to border-top-right-radius.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-010-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-010.xht">border-top-right-radius-010</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-right-radius using one length value: 25px 0
          <ul class="assert">
            <li>To verify if either length is 0, then the corner is not rounded.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-011-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-011.xht">border-top-right-radius-011</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-right-radius using one length value: 0 3em
          <ul class="assert">
            <li>To verify if either length is 0, then the corner is not rounded.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-012-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-012.xht">border-top-right-radius-012</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-top-right-radius using two length values: 0.5in 10mm
          <ul class="assert">
            <li>To verify border-top-right-radius property sets to two length values (with different units), works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-013-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-013.xht">border-top-right-radius-013</a></strong></td>
        <td></td>
        <td></td>
        <td>Borders. Border-top-right-radius using two length values: 40pt 2pc
          <ul class="assert">
            <li>To verify border-top-right-radius property sets to two length values (with different units), works fine</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-014-5.1" class="primary">
        <td><strong>
            <a href="border-top-right-radius-014.xht">border-top-right-radius-014</a></strong></td>
        <td><a href="reference/border-radius-001-ref.xht">=</a> </td>
        <td></td>
        <td>Borders. Border-top-right-radius using two length values: 50px -25px
          <ul class="assert">
            <li>To verify if one length value is negative for border-top-right-radius, then the element is not rounded.</li>
          </ul>
        </td>
      </tr>
      <tr id="css-border-radius-001-5.1" class="primary">
        <td><strong>
            <a href="css-border-radius-001.xht">css-border-radius-001</a></strong></td>
        <td><a href="reference/css-border-radius-ref-001.xht">=</a> </td>
        <td></td>
        <td>CSS border-radius Test
          <ul class="assert">
            <li></li>
          </ul>
        </td>
      </tr>
      <tr id="css-border-radius-002-5.1" class="primary">
        <td><strong>
            <a href="css-border-radius-002.xht">css-border-radius-002</a></strong></td>
        <td><a href="reference/css-border-radius-ref-002.xht">=</a> </td>
        <td></td>
        <td>CSS border-radius Test
          <ul class="assert">
            <li>if there is more then one graph and one color</li>
          </ul>
        </td>
      </tr>
      <tr id="css-box-shadow-001-5.1" class="">
        <td>
            <a href="css-box-shadow-001.xht">css-box-shadow-001</a></td>
        <td><a href="reference/css-box-shadow-ref-001.xht">=</a> </td>
        <td></td>
        <td>CSS box-shadow Test
          <ul class="assert">
            <li></li>
          </ul>
        </td>
      </tr>
    </tbody>
    <tbody id="s5.1.#border-bottom-left-radius">
      <!-- 0 tests -->
    </tbody>
    <tbody id="s5.1.#border-bottom-right-radius">
      <!-- 0 tests -->
    </tbody>
    <tbody id="s5.1.#border-radius">
      <!-- 30 tests -->
      <tr id="border-radius-applies-to-001-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-001.xht">border-radius-applies-to-001</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with 'display' set to inline
          <ul class="assert">
            <li>When 'border-radius' is applied to an element with 'displaye: inline' it produces rounded corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-002-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-002.xht">border-radius-applies-to-002</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with a display of 'block'.
          <ul class="assert">
            <li>When 'border-radius' is applied to an element with 'displaye: block' it produces rounded corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-003-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-003.xht">border-radius-applies-to-003</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with 'display' set to list-item.
          <ul class="assert">
            <li>When 'border-radius' is applied to an element with 'displaye: list-item' it produces rounded corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-004-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-004.xht">border-radius-applies-to-004</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with 'display' set to run-in.
          <ul class="assert">
            <li>When 'border-radius' is applied to an element with 'displaye: run-in' it produces rounded corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-005-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-005.xht">border-radius-applies-to-005</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with 'display' set to inline-block.
          <ul class="assert">
            <li>When 'border-radius' is applied to an element with 'displaye: inline-block' it produces rounded corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-006-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-006.xht">border-radius-applies-to-006</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with 'display' set to 'table'.
          <ul class="assert">
            <li>When 'border-radius' is applied to an element with 'displaye: table' it produces rounded corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-007-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-007.xht">border-radius-applies-to-007</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with 'display' set to 'table-caption'.
          <ul class="assert">
            <li>When 'border-radius' is applied to an element with 'displaye: table-caption' it produces rounded corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-008-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-008.xht">border-radius-applies-to-008</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with 'display' set to 'table-cell'.
          <ul class="assert">
            <li>When 'border-radius' is applied to an element with 'displaye: table-cell' it produces rounded corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-009-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-009.xht">border-radius-applies-to-009</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' should be ignored when in element with 'display' set to 'table-row' when 'border-collapse: collapse'.
          <ul class="assert">
            <li>'Border-radius' should be ignored when in element with 'display' set to 'table-row' when 'border-collapse: collapse'.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-010-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-010.xht">border-radius-applies-to-010</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with a display of 'none'.
          <ul class="assert">
            <li>When 'border-radius' property is applied to elements with a display of 'none' then it continues to not have a layout.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-011-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-011.xht">border-radius-applies-to-011</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with a display of 'inline-table'.
          <ul class="assert">
            <li>When 'border-radius' is applied to an element with 'displaye: inline-table' it produces rounded corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-012-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-012.xht">border-radius-applies-to-012</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' should be ignored in element with 'display' set to 'table-column' when 'border-collapse: collapse'.
          <ul class="assert">
            <li>'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-column' when 'border-collapse: collapse'.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-013-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-013.xht">border-radius-applies-to-013</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' should be ignored in element with 'display' set to 'table-row-group' when 'border-collapse: collapse'.
          <ul class="assert">
            <li>'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-row-group' when 'border-collapse: collapse'.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-014-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-014.xht">border-radius-applies-to-014</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' should be ignored in element with 'display' set to 'table-header-group' when 'border-collapse: collapse'.
          <ul class="assert">
            <li>'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-header-group' when 'border-collapse: collapse'.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-015-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-015.xht">border-radius-applies-to-015</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' should be ignored in element with 'display' set to 'table-footer-group' when 'border-collapse: collapse'.
          <ul class="assert">
            <li>'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-footer-group' when 'border-collapse: collapse'.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-016-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-016.xht">border-radius-applies-to-016</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' should be ignored in element with 'display' set to 'table-column-group' when 'border-collapse: collapse'.
          <ul class="assert">
            <li>'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-column-group' when 'border-collapse: collapse'.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-applies-to-017-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-applies-to-017.xht">border-radius-applies-to-017</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' applied to element with 'display' set to 'inherit'.
          <ul class="assert">
            <li>When 'border-radius' is applied to an element with 'displaye: inherit' it produces rounded corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-clip-001-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-clip-001.xht">border-radius-clip-001</a></strong></td>
        <td></td>
        <td></td>
        <td>'Overflow' clips to the curve of the rounded corner.
          <ul class="assert">
            <li>'Overflow' clips to the curve of the rounded corner.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-clip-002-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-clip-002.xht">border-radius-clip-002</a></strong></td>
        <td></td>
        <td></td>
        <td>Background is clipped to the curve of the content-box when 'background-clip: content-box'
          <ul class="assert">
            <li>Background is clipped to the curve of the content-box when 'background-clip: content-box'</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-content-edge-001-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-content-edge-001.xht">border-radius-content-edge-001</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' set to 'img'
          <ul class="assert">
            <li>The content of replaced element 'img' is trimmed to the content edge curve of a rounded corner.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-different-width-001-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-different-width-001.xht">border-radius-different-width-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Adjoining borders with different thicknesses show a smooth transition between the thicker and the thinner borders.
          <ul class="assert">
            <li>When 'border-radius' is applied to two adjoining sides with different thicknesses the border shows a smooth transition between the thicker and the thinner sides.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-initial-value-001-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-initial-value-001.xht">border-radius-initial-value-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Initial value of 'border-radius' is 0
          <ul class="assert">
            <li>Initial value of 'border-radius' is 0.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-not-inherited-001-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-not-inherited-001.xht">border-radius-not-inherited-001</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' is not inherited by default
          <ul class="assert">
            <li>'Border-radius' is not inherited by default.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-shorthand-001-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-shorthand-001.xht">border-radius-shorthand-001</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' shorthand is used to set all four 'border-[*]-radius' properties.
          <ul class="assert">
            <li>'Border-radius' shorthand sets all four 'border-[*]-radius' properties.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-sum-of-radii-001-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-sum-of-radii-001.xht">border-radius-sum-of-radii-001</a></strong></td>
        <td></td>
        <td></td>
        <td>Different variations on the sum of border-radius for adjacent corners
          <ul class="assert">
            <li>If the sum of any two adjacent corner radii exceeds the size of the border box, all the corner radii are reduced proportionally until none of them overlap.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-sum-of-radii-002-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-sum-of-radii-002.xht">border-radius-sum-of-radii-002</a></strong></td>
        <td></td>
        <td></td>
        <td>Different variations on the value of 'f'
          <ul class="assert">
            <li>When the value of 'f' is less than 1, then all corner radii are reduced by multiplying them with 'f'.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-with-three-values-001-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-with-three-values-001.xht">border-radius-with-three-values-001</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' property with three values
          <ul class="assert">
            <li>If bottom-left radius is omitted in the 'border-radius' property then the bottom-left radius is the same as the top-right radius.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-with-two-values-001-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-radius-with-two-values-001.xht">border-radius-with-two-values-001</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-radius' property with two values
          <ul class="assert">
            <li>If bottom-right radius is omitted in the 'border-radius' property then the bottom-right radius is the same as the top-left radius.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-values-004-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-top-left-radius-values-004.xht">border-top-left-radius-values-004</a></strong></td>
        <td></td>
        <td></td>
        <td>Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box.
          <ul class="assert">
            <li>Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-right-radius-values-004-5.1.#border-radius" class="primary">
        <td><strong>
            <a href="border-top-right-radius-values-004.xht">border-top-right-radius-values-004</a></strong></td>
        <td></td>
        <td></td>
        <td>Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.
          <ul class="assert">
            <li>Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.</li>
          </ul>
        </td>
      </tr>
    </tbody>
    <tbody id="s5.1.#border-top-left-radius">
      <!-- 3 tests -->
      <tr id="border-top-left-radius-values-001-5.1.#border-top-left-radius" class="primary">
        <td><strong>
            <a href="border-top-left-radius-values-001.xht">border-top-left-radius-values-001</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-top-left-radius' with two values.
          <ul class="assert">
            <li>The first value of the 'border-top-left-radius' is the horizontal radius of the rounded corner and the second value is its vertical radius.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-values-002-5.1.#border-top-left-radius" class="primary">
        <td><strong>
            <a href="border-top-left-radius-values-002.xht">border-top-left-radius-values-002</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-top-left-radius' with one value.
          <ul class="assert">
            <li>'Border-top-left-radius' with an omitted second value has the vertical radius of the rounded corner equal to its horizontal radius.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-top-left-radius-values-003-5.1.#border-top-left-radius" class="primary">
        <td><strong>
            <a href="border-top-left-radius-values-003.xht">border-top-left-radius-values-003</a></strong></td>
        <td></td>
        <td></td>
        <td>'Border-top-left-radius' with one value as 0.
          <ul class="assert">
            <li>If either value of 'border-top-left-radius' is 0 then the corner is a square.</li>
          </ul>
        </td>
      </tr>
    </tbody>
    <tbody id="s5.1.#border-top-right-radius">
      <!-- 0 tests -->
    </tbody>
    <tbody id="s5.2">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s5.2">+</a>
        <a href="http://www.w3.org/TR/css3-background/#corner-shaping">5.2 Corner Shaping</a></th></tr>
      <!-- 1 tests -->
      <tr id="background-clip-padding-box-with-border-radius-5.2" class="">
        <td>
            <a href="background-clip-padding-box-with-border-radius.xht">background-clip-padding-box-with-border-radius</a></td>
        <td></td>
        <td></td>
        <td>background-clip: padding-box with border-radius
          <ul class="assert">
            <li>Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness.</li>
          </ul>
        </td>
      </tr>
    </tbody>
    <tbody id="s5.3">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s5.3">+</a>
        <a href="http://www.w3.org/TR/css3-background/#corner-clipping">5.3 Corner Clipping</a></th></tr>
      <!-- 2 tests -->
      <tr id="border-radius-clipping-5.3" class="primary">
        <td><strong>
            <a href="border-radius-clipping.xht">border-radius-clipping</a></strong></td>
        <td><a href="reference/border-radius-clipping-ref.xht">=</a> </td>
        <td></td>
        <td>Border radius clipping
          <ul class="assert">
            <li>When set with 'overflow: hidden', outer container should clip background of an element insides at the corners.</li>
          </ul>
        </td>
      </tr>
      <tr id="border-radius-overflow-hidden-5.3" class="primary">
        <td><strong>
            <a href="border-radius-overflow-hidden.xht">border-radius-overflow-hidden</a></strong></td>
        <td></td>
        <td></td>
        <td>Clipping to the border-radius curve
          <ul class="assert">
            <li>Effects that clip to the border or padding edge (such as &amp;acirc;&amp;#8364;&amp;#732;overflow&amp;acirc;&amp;#8364;&amp;#8482; other than &amp;acirc;&amp;#8364;&amp;#732;visible&amp;acirc;&amp;#8364;&amp;#8482;) must clip to the curve</li>
          </ul>
        </td>
      </tr>
    </tbody>
    <tbody id="s5.4">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s5.4">+</a>
        <a href="http://www.w3.org/TR/css3-background/#corner-transitions">5.4 Color and Style Transitions</a></th></tr>
      <!-- 0 tests -->
    </tbody>
    <tbody id="s5.5">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s5.5">+</a>
        <a href="http://www.w3.org/TR/css3-background/#corner-overlap">5.5 Overlapping Curves</a></th></tr>
      <!-- 0 tests -->
    </tbody>
    <tbody id="s5.5.#reduced-radius">
      <!-- 0 tests -->
    </tbody>
    <tbody id="s5.6">
      <tr><th colspan="4" scope="rowgroup">
        <a href="#s5.6">+</a>
        <a href="http://www.w3.org/TR/css3-background/#border-radius-tables">5.6 Effect on Tables</a></th></tr>
      <!-- 1 tests -->
      <tr id="ttwf-reftest-borderradius-5.6" class="primary">
        <td><strong>
            <a href="ttwf-reftest-borderRadius.xht">ttwf-reftest-borderradius</a></strong></td>
        <td><a href="reference/ttwf-reftest-borderRadius-ref.xht">=</a> </td>
        <td></td>
        <td>Test Background and border
          <ul class="assert">
            <li>Table with 'border-collapse: collapse;' declaration, it's 'border-radius' style will not work.</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>

 </body>
</html>