Table border radius is not working

ionic-v1
4

Let me send you full tested demo which is working in Google Chrome and Firefox both.

ionic.app.scss

.bordered {
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 1px #CCCCCC;
}
table {
    border-collapse: initial;
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
}        
.bordered {
    th {
        background-color: #DCE9F9;
        background-image: -moz-linear-gradient(center top , #F8F8F8, #ECECEC);
        background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
        border-top: medium none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        border-left: 1px solid #CCCCCC;
        border-top: 1px solid #CCCCCC;
        padding: 10px;
        text-align: left;
        &:first-child {
             -webkit-border-radius: 6px 0 0 0;
             -moz-border-radius: 6px 0 0 0;
             border-radius: 6px 0 0 0;
             border-left: medium none;
        }
        &:last-child {
            -webkit-border-radius: 0 6px 0 0;
            -moz-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
        }
    }
}

.bordered {
    td {
        border-left: 1px solid #CCCCCC;
        border-top: 1px solid #CCCCCC;
        padding: 10px;
        text-align: left;
        &:first-child {
            border-left: medium none;
        }
    }
}

In template file

   <table class="bordered">
  <thead>
      <tr>
          <th><label>Header1</label></th>
          <th><label>Header2</label></th>
      </tr>
  </thead>
  
  <tbody>
      <tr>
          <td><label>Text1</label></td>
          <td><label>Text2</label></td>
      </tr>
  </tbody>                    
</table>

This will work only if you have setup the sass in your ionic application.