how can i design checkboxes with css in html code

Hi i am currently trying to style my checkboxes of my table, but no parameter except the width and height get taken over.

This is my code:

<style>

.hide {
  display: none;
}

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"]{
  width: 18px;
  height: 18px;
  display: block;
background-color: #bbb;
border-radius: 20px;
border: 2px solid #8bdd2d;
  content: "";

}

</style>

these are random parameters, I'm only trying to make them work. thanks for any help!