How can add two rounds shapes in a rectangle? [duplicate] - html

Question

I want to create a shape using CSS. The only problem I am facing is the alignment of semicircle with the border of rectangle which is not working out properly.
I am attaching the image of what I have done till now. Can anybody help me out to fix these alignment problem. Thank you.
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
#talkbubble {
width: 120px;
height: 80px;
border: 4px solid #4C4C4C;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
top: 42%;
left: -11.6px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(90deg);
box-sizing: border-box;
}
#talkbubble:after {
content: "";
position: absolute;
top: 42%;
right: -12px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(270deg);
box-sizing: border-box;
}
<div id="talkbubble"></div>

Answer 1

I would do it differently with one element:
.ticket {
width:300px;
height:200px;
border-radius:20px;
border:8px solid;
background:
radial-gradient(circle 38px at right,#000 95%,#0000),
radial-gradient(circle 38px at left ,#000 95%,#0000);
background-origin:border-box;
-webkit-mask:
radial-gradient(circle 30px at right,#0000 95%,#000) right,
radial-gradient(circle 30px at left ,#0000 95%,#000) left;
-webkit-mask-size:51% 100%;
-webkit-mask-repeat:no-repeat;
}
<div class="ticket"></div>

Answer 2

You could add overflow hidden in case, and a full circle?
.ticket-outer {
overflow: hidden;
height: 150px;
width: 300px;
margin: 50px auto;
}
.ticket {
border: 5px solid #000;
border-radius: 20px;
height: 150px;
width: 300px;
position: relative;
box-sizing: border-box;
}
.ticket::before,
.ticket::after {
content: '';
width: 50px;
height: 50px;
border: 5px solid #000;
background: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: -30px;
transform: translateY(-50%);
z-index: 2;
}
.ticket::after {
left: auto;
right: -30px;
}
<div class="ticket-outer">
<div class="ticket"></div>
</div>