Ich brauche Hilfe mit dieser https://jsfiddle.net/ymony0qy/.Warum beschriften Sie mit Randradius und Rand eine äußere Eckgrenze?
.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>
\t \t \t <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">
\t \t \t <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>
Wie Sie an jeder Ecke sehen kann, ist einige kleine gepunktete Linie außerhalb. Wenn ich lösche border: 5px #fff solid; ist es in Ordnung. Irgendwelche Hilfe dafür? Danke
Es ist, weil Sie die Pixelgrenze erreicht. Was Sie sehen, ist das Maximum, das mit Pixeln erreicht werden kann. Etwas genauer zu machen würde Vektoren benötigen. – Relisora