Rounded checkbox border won't change - html

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>