Why does the circle I draw with css gradient look like this?

as shown in the following picture, it"s not round at all. Please help me to see if there is something wrong with my code

html

 <div class="box"></div>


css

.box{
    position: relative;
    width: 300px;
    height: 140px;
    background: red;

}
.box:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;

    background: radial-gradient(farthest-corner, -sharpfff 50%, transparent 0%);
    background-size: 20px 20px;
    background-repeat: repeat-y;
}
.box:after{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;

    background: radial-gradient(farthest-corner, -sharpfff 50%, transparent 0%);
    background-size: 20px 20px;
    background-repeat: repeat-y;
}

.box{ position: relative; width: 300px; height: 140px; background: red; } .box:before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; background: radial-gradient(farthest-corner, -sharpfff 50%, rgba(255, 255, 255, .5) 53%, rgba(255, 255, 255, 0) 0%); background-size: 20px 20px; background-repeat: repeat-y; } .box:after{ content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px; background: radial-gradient(farthest-corner, -sharpfff 50%, rgba(255, 255, 255, .5) 53%, rgba(255, 255, 255, 0) 0%); background-size: 20px 20px; background-repeat: repeat-y; }