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

clipboard.png

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;
}
Mar.04,2021

there seems to be no way to achieve a perfect circle. However, your screenshot is actually caused by a sharp edge. You can simply modify it to soften the figure, as follows:

clipboard.png

.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;
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf45f7-31f0a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf45f7-31f0a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?