How to make oval-ish shape in 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>