Espacio entre el borde y el elemento secundario con radio de borde

Question

Estoy tratando de implementar botones de radio que funcionan como controles segmentados:

* {
  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>

Sin embargo, hay un espacio molesto de aproximadamente 1 px entre la etiqueta anidada y el div principal:

Este problema es similar a esta pregunta , pero las soluciones alternativas sugeridas no funcionan realmente para mi caso de uso, ya que no puedo cambiar el color de fondo. También tengo curiosidad por saber si se trata de un error del navegador o algún tipo de problema de suavizado.

Answer 1

simplemente agregue la sombra del cuadro a la entrada: verificación + etiqueta

input:checked + label {
    background-color: skyblue;
    box-shadow: 0px 0px 0 1px skyblue;
}

Enlace a Jsfiddle

Answer 2

No sé la razón por la que obtienes ese espacio de 1 px, pero puedes agregar "transform: translateX (-1px);" para desplazarlo a la izquierda en 1px. Esto puede funcionar como una solución temporal.

  label {
    flex: 1;
    padding: 2rem;
    border-radius: 200px;
    text-align: center;
    transform: translateX(-1px);
  }

Answer 3

Cambiar label border-radius 999pxa35px

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>