HTML-CSS - Is there a way to add anti-aliasing to my div?

Question

I have a < div> that looks like the picture:

Code: HTML:

<div class="title">
  <h1>Sample Text</h1>
</div>

CSS:

.title {
  margin-top: -15%;
  padding: 2rem;
  border-radius: 0 0 100% 50% / 40% 40% 40% 5%;
  background-color: $borderWaveColor;
  box-shadow: 0 5px 0 0 #fdd3017a;
  mask-image: radial-gradient(ellipse 50% 20% at top center, transparent 100%, transparent 100%, black 100%);
  mask-size: 100%;
}

As seen in the image, the top border is not smooth. Is there a way that I can make it smoother/add anti-aliasing to it?

Also if I can ask you here. As you can see I have a line with box-shadow in my CSS, but it doesnt show it, is there a simple way to fix that too?

Thanks in advance!