Is there a way to create an circlular design inside a rectangle and adjust the circumference?

Question

I am trying to create something similar to a semi circle inside a rectangle something like this, the ellipse in the background.

expected design

I am able to implement the circle inside the rectangle but couldn't find a way to cut out the extra part of the ellipse, can someone please help me with achieving the required design?

achieved

.rectangle {
    height: 110px;
    width:200px;
    background-color: #EDEDED;
    border-radius: 9px;
    position: relative;
}

position: absolute;
    border-bottom: 1px solid black;
    border-left: 1px solid gray;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    right: 0;
    bottom: 20px;  
    left: 100px;

Answer 1

You want to hide the part of the circle that overflows the rectangle

You can do this by setting overflow: hidden; on the rectangle.

.rectangle {
  height: 110px;
  width: 200px;
  background-color: #EDEDED;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
}

.circle {
  position: absolute;
  border-bottom: 1px solid black;
  border-left: 1px solid gray;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  right: 0;
  bottom: 20px;
  left: 100px;
}

<div class="rectangle">
  <div class="circle">
  </div>
</div>