边界半径＆＃34;无bug＆＃34;在Chrome中

Question

如何修复Chrome中的border-radius行为？

＆＃13;

＆＃13;

table {
  border-collapse:collapse;
}
td {
  border:1px solid #000;
  padding:10px;
  background:lightgreen;
}
.tl {
  border-radius: 15px 0 0 0;
}
.tr {
  border-radius: 0 15px 0 0;
}
.br {
  border-radius: 0 0 15px 0;
}
.bl {
  border-radius: 0 0 0 15px;
}

＆＃13;

<table>
  <tr>
    <td class="tl">name1</td>
    <td class="tr">value1</td>
  </tr>
  <tr>
    <td class="bl">name2</td>
    <td class="br">value2</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

在IE中效果很好。

Answer 1

有点解决方案，但我不喜欢这种方式

table {
  border-collapse: separate;
  border-spacing: 0px;
  border:.5px solid #000;
  border-radius: 15px;
}
td {
  border:.5px solid #000;
  padding:10px;
  background:lightgreen;
}
.tl {
  border-radius: 15px 0 0 0;
}
.tr {
  border-radius: 0 15px 0 0;
}
.br {
  border-radius: 0 0 15px 0;
}
.bl {
  border-radius: 0 0 0 15px;
}

<table>
  <tr>
    <td class="tl">name1</td>
    <td class="tr">value1</td>
  </tr>
  <tr>
    <td class="bl">name2</td>
    <td class="br">value2</td>
  </tr>
</table>

另一个，好一点

table { 
  border-collapse: separate;
  border-spacing: 0px;
}
td {
  padding: 10px; 
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  background: lightgreen;
}
td:last-child {
  border-right: 1px solid #000;
}
tr:last-child td {
  border-bottom: 1px solid #000;
}
.tl {
  border-radius: 15px 0 0 0;
}
.tr {
  border-radius: 0 15px 0 0;
}
.br {
  border-radius: 0 0 15px 0;
}
.bl {
  border-radius: 0 0 0 15px;
}

<table>
  <tr>
    <td class="tl">name1</td>
    <td class="tr">value1</td>
  </tr>
  <tr>
    <td class="bl">name2</td>
    <td class="br">value2</td>
  </tr>
</table>