Gap between border and child element with border radius - html

Question

I'm trying to implement radio buttons which kind of work like segmented controls:
* {
margin: 0;
padding: 0;
}
.container {
background-color: brown;
width: 80vw;
}
.box {
display: flex;
flex-direction: row;
border: 2rem solid skyblue;
border-radius: 999px;
}
label {
flex: 1;
padding: 2rem;
border-radius: 999px;
text-align: center;
}
input {
display: none;
}
input:checked + label {
background-color: skyblue;
}
<div class="container">
<div class="box">
<input type="radio" id="hello" name="test" checked />
<label for="hello">Hello</label>
<input type="radio" id="world" name="test" />
<label for="world">World</label>
</div>
</div>
However, there's an annoying gap of about 1px between the nested label and the parent div:
This issue is similar to this question, but the workarounds suggested don't really work for my use case since I can't change the background color. I'm also curious if this is a browser bug or some kind of anti-aliasing issue.

Answer 1

just add box shadow to the input:check + label
input:checked + label {
background-color: skyblue;
box-shadow: 0px 0px 0 1px skyblue;
}
Link to Jsfiddle

Answer 2

I don't know the reason why you are getting that 1 px gap but you can add "transform: translateX(-1px);" to shift it left by 1px. This can work as a temp solution.
label {
flex: 1;
padding: 2rem;
border-radius: 200px;
text-align: center;
transform: translateX(-1px);
}

Answer 3

Change label border-radius 999px to 35px
label {
flex: 1;
padding: 2rem;
border-radius: 35px;
text-align: center;
}
* {
margin: 0;
padding: 0;
}
.container {
background-color: brown;
width: 80vw;
}
.box {
display: flex;
flex-direction: row;
border: 2rem solid skyblue;
border-radius: 999px;
}
label {
flex: 1;
padding: 2rem;
border-radius: 35px;
text-align: center;
}
input {
display: none;
}
input:checked + label {
background-color: skyblue;
}
<div class="container">
<div class="box">
<input type="radio" id="hello" name="test" checked />
<label for="hello">Hello</label>
<input type="radio" id="world" name="test" />
<label for="world">World</label>
</div>
</div>