estou tentando fazer uma tabela com bordas verticais e horizontais de cores diferentes de modo que a vertical sobreponha a horizontal mas não esta dando certo. Como eu poderia colocar a borda left acima da borda bottom?
<table>
<tr style="background: #2B9EA2">
<th style="border-radius: 20px 0px 0px 0px;">MOVIMENTAÇÃO</th>
<th style="border-left: 3px solid black">SALDO MENSAL</th>
<th style="border-radius: 0px 20px 0px 0px; border-left: 3px solid black;">SALDO ACUMULADO</th>
</tr>
<tr style="background: #A3741C">
<th class="curva">SALDO INICIAL</th>
<td>R$ 852.650,59</td>
<td>-</td>
</tr>
<tr style="background: #24A360">
<th class="curva">ORIGEM DE RECURSOS - RECEITA</th>
<td>R$ 2.786.199,17</td>
<td>R$ 2.791.195</td>
</tr>
<tr style="background: #24A360">
<th class="curva">REPASSES</th>
<td>R$ 2.786.199,17</td>
<td>R$ 2.786.074</td>
</tr>
<tr style="background: #24A360">
<th class="curva">APLICAÇÕES/INVESTIMENTOS</th>
<td>R$ 3.124</td>
<td>R$ 8.121</td>
</tr>
<tr style="background: #C0C0C0">
<th class="curva">OUTRAS MOVIMENTAÇÕES</th>
<td>-</td>
<td>-</td>
</tr>
<tr style="background: #C0C0C0">
<th class="curva">TRANSFERÊNCIAS - PROVISÕES</th>
<td>-</td>
<td>-</td>
</tr>
<tr style="background: #A3463C">
<th class="curva">APLICAÇÃO DE RECURSOS - DESPESAS</th>
<td>R$ 1.671.723,17</td>
<td>R$ 3.122.863,92</td>
</tr>
<tr style="background: #A3741C">
<th class="curva">SALDO BANCÁRIO - FINAL</th>
<td>R$ 1.967.126,59</td>
<td>R$ 520.981,80</td>
</tr>
</table>
<style lang="sass">
h1
text-align: center
table, th, td
font-weight: bold
table
margin: auto
border-collapse: collapse
td
padding: 10px 2px 10px 2px
text-align: center
border-left: solid black
border-bottom: 20px
td, .curva
border-radius: 6px
th
width: 120px
th, td
border-bottom: 5px solid white
</style>