How to make oval-ish shape in css - css

Question

I am trying to make this grey shape using a css class.
I thought using a border-raduis would work. The shape is close but is still off.
I currently have this:
This is the css that i'm using:
.total--races {
text-align: right;
font-size: 32px;
background: #44ade2;
color: #fff;
width: 78px;
height: 88px;
border-radius: 50px 0px 0px 50px;
}
and this html :
<div className="total--races">
{get(meeting, 'races', '') &&
Object.keys(meeting.races).length}
</div>
Any suggestion of how to make my shape look close would help. Thanks.

Answer 1

use radial-gradient without the need of border-radius
.total--races {
text-align: right;
font-size: 32px;
color: #fff;
width: 78px;
height: 88px;
background:
radial-gradient(circle at right center,#44ade2 70%,transparent 72%);
}
<div class="total--races">
99<br>text
</div>
To have better control use explicit radius:
.total--races {
text-align: right;
font-size: 32px;
color: #fff;
width: 78px;
height: 88px;
background:
radial-gradient(80% 110% at right center,#44ade2 98%,transparent 100%);
}
<div class="total--races">
99<br>text
</div>