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

Html css3 css javascript

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:

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

Previous: Babel-polyfill error, only one instance of babel-polyfill is allowed

Next: Block malicious ip code

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-1ea0ad8-5c911.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-1ea0ad8-5c911.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?