为什么带有边框半径和边框的标签会形成一些外边角？

Question

我需要帮助https://jsfiddle.net/ymony0qy/。

  .row {
    height: 50px;
    display:table-row;
    
}
.col-left, .col-right {
    
    display: table-cell;
    vertical-align: middle;
}

.col-left{
  width: 100px;
  background-color: #FFCC66 ;
  text-align: center;
}

.col-left .content span{
  font-size: 20px;  
}

.lab-variace {
    background: #ff6800;
    color: #fff;
    border-radius: 15px;
    border-collapse: separate;
    padding: 1.2em;
    margin: 0.2em;
    cursor: pointer;
    width: 220px;
    display: table-cell;
    border: 5px #fff solid;
    height: 60px;
}

.lab-variace:hover {
    background:#ccc;   
}

.radio-varia:checked + .lab-variace{
  background: red;
}

.variace{
  margin-bottom: 15px;
}

.radio-varia{
  visibility: hidden !important; 
  position: absolute !important;
}

<div id="variace">
      <div class="row">
      <input type="radio" name="pred_conf" id="zaklad" onclick="pocitej_vps()" value="zaklad" class="radio-varia"><label class="lab-variace" for="zaklad">Var 1<br />xx<br />xx<br />x</label>
			<input type="radio" name="pred_conf" id="stred" onclick="pocitej_vps()" value="stred" class="radio-varia"><label class="lab-variace" for="stred">Var 1<br />xx<br />xx<br />x</label>
      </div><div class="row">
			<input type="radio" name="pred_conf" id="extra" onclick="pocitej_vps()" value="extra" class="radio-varia"><label class="lab-variace" for="extra">Var 1<br />xx<br />xx<br />x</label>
      <input type="radio" name="pred_conf" id="own" checked="checked" onclick="pocitej_vps()" value="own" class="radio-varia"><label class="lab-variace" for="own">Var 1<br />xx<br />xx<br />x<br /><br /><br /></label>
      </div></div>

正如你在每个角落都看到的那样，外面有一点点缀。当我删除 border：5px #fff solid; 时没关系。有什么帮助吗？感谢

Answer 1

尝试在background-clip:padding-box和.lab-variace类上使用.radio-varia:checked + .lab-variace。

Fiddle

More info on background-clip