<form>
 <div class="radio-group">
<input type="radio" id="option-one" name="selector"><label for="option-one">One</label><input type="radio" id="option-two" name="selector"><label for="option-two">Two</label><input type="radio" id="option-three" name="selector"><label for="option-three">Three</label>
  </div>
   </form>

$bg: #332f35;
$fg: lighten($bg,20%);
$borderWidth: 3px;

body {
  background: $bg;
  font-family: roboto;
}

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

label {
  color: lighten($bg,40%);
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 20px;
}

input[type=radio]:checked + label{
  color: lighten($bg,60%);
  background: $fg;
}

label + input[type=radio] + label {
  border-left: solid $borderWidth $fg;
}
.radio-group {
  border: solid $borderWidth $fg;
  display: inline-block;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
}

@import url('https://fonts.googleapis.com/css?family=Roboto');