Rounded checkbox border won't change

Question

So I am trying to change the border of a rounded checkbox I have in my code. I want to make the border thinner.

.roundedOne {
  width: 28px;
  height: 28px;
  position: absolute;
  left: 0px;
  top: 1100px;
  background: white;
  background: -webkit-linear-gradient(top, white 0%, black 0%, black 80%);
  background: linear-gradient(to bottom, white 0%, black 0%, black 80%);
  border-radius: 100px;
}
.roundedOne label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 4px;
  background: white;
  border-radius: 100px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedOne label:after {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #19B5FE;
  opacity: 0;
  border-radius: 100px;
}
.roundedOne label:hover::after {
  opacity: 0;
}
.roundedOne input[type=checkbox] {
  visibility: hidden;
}
.roundedOne input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div class="roundedOne">
  <input type="checkbox" value="None" id="roundedOne" name="check" checked />
  <label for="roundedOne"></label>
</div>

How can I make the outside border which is black, thinner? Also how can I change it because now when I enter the page it is already filled, I want it to be unfilled when someone enters page.

Here is what I want:

Answer 1

Change width/height of your .roundedOne (which updated to just a single div) then change top/left to center the input within the background black.

Remove checked in HTML to not be checked when you enter the page.

body {
  background: gray;
  margin: 0
}
div {
  width: 26px;
  height: 27px;
  position: relative;
  left: 0;
  /*top: 1100px; */
  background: white;
  background: -webkit-linear-gradient(top, white 0%, black 0%, black 80%);
  background: linear-gradient(to bottom, white 0%, black 0%, black 80%);
  border-radius: 100px;
}
label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 100px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
label:after {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #19B5FE;
  opacity: 0;
  border-radius: 100px;
}
span {
  display: inline-block;
  margin-left: 30px;
  min-width:100px
}
label:hover::after {
  opacity: 0;
}
input[type=checkbox] {
  visibility: hidden;
}
input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div>
  <input type="checkbox" value="None" id="roundedOne" name="check" />
  <label for="roundedOne">
    <span>Checkbox 1</span>
  </label>
</div>
<div>
  <input type="checkbox" value="None" id="roundedTwo" name="check" />
  <label for="roundedTwo">
    <span>Checkbox 2</span>
  </label>
</div>
<div>
  <input type="checkbox" value="None" id="roundedThree" name="check" />
  <label for="roundedThree">
    <span>Checkbox 3</span>
  </label>
</div>
<div>
  <input type="checkbox" value="None" id="roundedFour" name="check" />
  <label for="roundedFour"><span>Checkbox 4</span>
  </label>
</div>