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;

CodePudding user response：

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 >
  <div >
  </div>
</div> 

CodePudding user response：

   .rectangle{
 height: 110px;
    width:200px;
    background-color: #313131;
    border-radius: 9px;
    position: relative;
    overflow: hidden;
}
.circle{
position: absolute;
    right: 3px;
    top: 1px;
    width: 93%;
    height: 95%;
    border-radius: 50%;
    background: #404040;
}
.circle-border{
          border-radius: 50%;
    position: relative;
    right: -129px;
    top: -6px;
    width: 41%;
    height: 70%;
    border: 2px solid #404040;
}

    <div >
<div >
    
    <div >
    
    </div>
    
    </div>
</div>