Gap between border and child element with border radius

user_13715888 0
Viewed 915

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:

image showing gap between nested elements with border radii

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.

css html
3 Answers

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

user_86010590

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);
  }
user_113859770

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>

user_40950560
Related