cssスタイルでcheckboxチェックボックスをフィレットに変更する

1.この文章を見たとき、checkboxのスタイルをフィレットに変えたい場合は、従来のcssでcheckboxの下にborder-radius=50%を追加することを発見したに違いありません.実現できない.

input[type="checkbox"]{
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 50%;
}

/*実現できません*/
2.だから次はcssスタイルで実現する

span {
    position: relative;
}
.Checkbox {
    position: absolute;
    visibility: hidden;
}
.Checkbox+label {
    position:absolute;
    width: 16px;
    height: 16px;
    border: 1px solid #A6A6A6;
    border-radius: 50%;
    background-color:#DEDEDE;
} 
.Checkbox:checked+label:after {
    content: "";
    position: absolute;
    left: 2px;
    top:2px;
    width: 9px;
    height: 4px;
    border: 2px solid #424242;
    border-top-color: transparent;
    border-right-color: transparent; 
    transform: rotate(-45deg);
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
}

2.効果表示デモ
https://leader755.github.io/checkbox-fillter/
"target="_blank">ポイントプレゼンテーションの効果を表示
https://github.com/Leader755/checkbox-fillter.git
"target="_blank">ポイントソースをダウンロード