Rounded checkbox border won't change

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

here is html code for checkbox

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

here is css

.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;
 }

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.