Edit in JSFiddle

.form{width: 400px;}
.radio-container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-family: sans-serif;
}
.radio-container *{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.radio-container .radio-btn{
  overflow: hidden;
}
.radio-container .radio-btn.nth-2{width: calc(50% - 1px);}
.radio-container .radio-btn.nth-3{width: calc(33.3333% - 1.4px);}
.radio-container .radio-btn.nth-4{width: calc(25% - 1.5px);}
.radio-container .radio-btn label{
  background: linear-gradient(to bottom, #f8f8fa 0%,#c8c8c7 100%);
  display: block;
  padding: 6px 12px;
  text-align: center;
  color: #7e7e7e;
  border-top: 1px solid #b4b5b9;
  border-bottom: 1px solid #b4b5b9;
  border-right: 1px solid #b4b5b9;
}
.radio-container .radio-btn input{display: none;}
.radio-container .radio-btn input:checked + label{
  background: linear-gradient(to bottom, #3f7add 0%,#71acf7 100%);
  color: #fff;
}
.radio-container .radio-btn:first-child label{
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-left: 1px solid #b4b5b9;
}
.radio-container .radio-btn:last-child label{
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
<form class="form">
  <div class="radio-container">
      <div class="form-item radio-btn nth-2">
      <input type="radio" name="option1" id="radio1" checked>
      <label for="radio1">radio1</label>
    </div>
      <div class="form-item radio-btn nth-2">
      <input type="radio" name="option1" id="radio2">
      <label for="radio2">radio2</label>
    </div>
  </div>
</form>

<br>

<form class="form">
  <div class="radio-container">
    <div class="form-item radio-btn nth-3">
      <input type="radio" name="option2" id="radio3" checked>
      <label for="radio3">radio3</label>
    </div>
      <div class="form-item radio-btn nth-3">
      <input type="radio" name="option2" id="radio4">
      <label for="radio4">radio4</label>
    </div>
      <div class="form-item radio-btn nth-3">
      <input type="radio" name="option2" id="radio5">
      <label for="radio5">radio5</label>
    </div>
  </div>
</form>

<br>

<form class="form">
  <div class="radio-container">
    <div class="form-item radio-btn nth-4">
      <input type="radio" name="option3" id="radio6" checked>
      <label for="radio6">radio6</label>
    </div>
      <div class="form-item radio-btn nth-4">
      <input type="radio" name="option3" id="radio7">
      <label for="radio7">radio7</label>
    </div>
    <div class="form-item radio-btn nth-4">
      <input type="radio" name="option3" id="radio8">
      <label for="radio8">radio8</label>
    </div>
    <div class="form-item radio-btn nth-4">
      <input type="radio" name="option3" id="radio9">
      <label for="radio9">radio9</label>
    </div>
  </div>
</form>