Tenho o seguinte código:
table {
border-collapse: collapse;
}
.item1, .item2, .item3 {
border-top:1pt solid black;
border-bottom:1pt solid black;
}
.item1 {
border-left:1pt solid black;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.item3 {
border-right:1pt solid black;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
<table>
<tr>
<td>I</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
<td>K</td>
</tr>
<tr>
<td>X</td>
<td class="item1">A</td>
<td class="item2">B</td>
<td class="item3">C</td>
<td>Y</td>
</tr>
<tr>
<td>I</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
<td>K</td>
</tr>
</table>
Perceba que minha tabela usa border-collapse: collapse
o que tem impedido de deixar as bordas arredondadas com border radius
. Como posso resolver esse problema?