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