how to make the progress bar curve at one end

hi im trying to create an animated circular progress bar , i want make the circular bar( blue in color) curve at one end . i tried to add border-radius but it is not working , border radius is working all the end except the end point

here is the link http://circularbar.surge.sh/ [![enter image description here][1]][1]

here is all the necessary codes

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="progress blue">
                <span class="progress-left">
                    <span class="progress-bar"></span>
                </span>
                <span class="progress-right">
                    <span class="progress-bar"></span>
                </span>
                <div class="progress-value">90%</div>
            </div>
        </div>
        
    </div>
</div>

css codes

.progress .progress-left{
    left: 0;
}
.progress .progress-bar{
    width: 100%;
    height: 100%;
    background: none;
    border-width: 15px;
    border-style: solid;
    position: absolute;
    top: 0;
}
.progress .progress-left .progress-bar{
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
} ```


  [1]: https://i.stack.imgur.com/xTsyn.png