Seperate Ant Design Radio Buttons

antd-vue-radio-buttons.html

<template>
  <a-radio-group
    class="radio-buttons"
    button-style="outline"
  >
    <a-radio-button value="a">
      Hangzhou
    </a-radio-button>
    <a-radio-button value="b">
      Shanghai
    </a-radio-button>
    <a-radio-button value="c">
      Beijing
    </a-radio-button>
    <a-radio-button value="d">
      Chengdu
    </a-radio-button>
  </a-radio-group>
</template>

<style scoped>
.radio-buttons >>> .ant-radio-button-wrapper {
  border-radius: 4px;
  outline: none;
  margin-right: 10px;
  margin-bottom: 5px;
}

.radio-buttons >>> .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {
  border-left: 1px solid #d9d9d9;
}

.radio-buttons >>> .ant-radio-button-wrapper:not(:first-child)::before {
  content: none;
}

.radio-buttons >>> .ant-radio-button-wrapper:last-child {
  margin-right: 0;
}
</style>