title: Having problems getting border radius and gradient on a header of a table at the same time
body: <p><strong>UPDATE : NOW IT WORKS IN CHROME AND NOT IN FIREFOX</strong></p>
  <p>I cant get a border radius and and a gradient on the header of the table at the same time.</p>
  <pre><code>//normal table
  &lt;table cellspacing=&quot;0&quot;&gt;
      &lt;thead&gt;
          &lt;tr class =&quot;header&quot;&gt;
          &lt;th&gt;one&lt;/th&gt;&lt;th&gt;two&lt;/th&gt;&lt;th&gt;three&lt;/th&gt;&lt;th&gt;four&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tr&gt;&lt;td&gt;onetd&lt;/td&gt;&lt;td&gt;twotd&lt;/td&gt;&lt;td&gt;threetd&lt;/td&gt;&lt;td&gt;fourtd&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;onetd&lt;/td&gt;&lt;td&gt;twotd&lt;/td&gt;&lt;td&gt;threetd&lt;/td&gt;&lt;td&gt;fourtd&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;onetd&lt;/td&gt;&lt;td&gt;twotd&lt;/td&gt;&lt;td&gt;threetd&lt;/td&gt;&lt;td&gt;fourtd&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>css that is not working. the gradient was taken from some gradient generator</p>
  <pre><code>    tr:nth-child(even){
          background-color: yellow;
      }
          tr:nth-child(odd){
          background-color: green;
      }
      table thead tr.header{
              border-top-left-radius: 30px;
      border:1px solid black;
           background-image: linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
          background-image: -o-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
          background-image: -moz-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
          background-image: -webkit-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
          background-image: -ms-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
  
          background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.19, rgb(52,156,235)),
            color-stop(0.6, rgb(61,224,216))
          );
      }
  
  
  table thead tr.header &gt; th:nth-child(1){
  border-top-left-radius:10px; 
  
  
  }
  </code></pre>
  <p>I would definitely like it to work in major browsers</p>
  <p>not working <a href="http://jsfiddle.net/c6WqV/1/" rel="nofollow noreferrer">jsfiddle</a></p>