带：before和z-index的border-radius外部的CSS背景

Question

我正在尝试使用：before和z-index在边框半径之外设置背景色。

问题在于，边框半径css的起点应该是一个圆圈，右侧的后面应该是浅绿色，以连接到html元素2，但是它不起作用。

任何建议如何使其起作用？

td {
    width:40px;
    height:40px;
    text-align: center;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}

.middle {
  background-color: #b2edd6;
}

td.start {
    border-radius: 50%;
    background-color: #00AA6C;
    color: white;
    z-index: 1;
    position: relative;
}

td.start:before {
  content: "";
  background-color: #b2edd6;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
}

<table style='table-layout:fixed;border-collapse: collapse;'>
  
  <tbody>
    <tr>
      <td class='start'>1</td>
      <td class='middle'>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>