making the border for the radial gradient also - html

Question

How can i make the border to apply for the radial gradient so that the dotted line will apply for the curve at left and right not as a straight line
.container {
width: 160px;
height: 58px;
border: 1px dotted red;
background: radial-gradient(15px at left, #fff 98%, red) left,
radial-gradient(15px at right, #fff 98%, red) right;
background-size: 51% 100%;
background-repeat: no-repeat;
}
<div class='container'>
</div>

Answer 1

I played around with your code and here is what I came up with. This is a tricky one but it works. I added 2 half circle then hide them. I don't know where are you going to use this but an image will be a good idea as well for this.
.container {
width: 160px;
height: 58px;
border: 1px dotted red;
background: radial-gradient(15px at left, #fff 98%, red) left,
radial-gradient(15px at right, #fff 98%, red) right;
background-size: 51% 100%;
background-repeat: no-repeat;
}
.half-circle-left, .half-circle-right {
width: 30px;
height: 30px;
z-index:1;
background-color: white;
vertical-align:middle;
margin-top:8%;
overflow: overlay;
}
.half-circle-left {
float: left;
margin-left: -15px;
overflow: hidden;
border-radius: 0px 15px 15px 0px;
border-right: 1px dotted red;
}
.half-circle-right {
float:right;
margin-right: -15px;
border-radius: 15px 0px 0px 15px;
border-left: 1px dotted red;
}
<div class='container'>
<div class="half-circle-left">
</div>
<div class="half-circle-right">
</div>
MY TEXT HERE! Please put more text here
</div>

Answer 2

As I know it is not possible, instead of using a dotted border you can use box-shadow to act like a solid border and use a pseudo-elements :after :before to draw the circle in both sides.
Here is the code:
<div class='container'>
</div>
.container {
position: relative;
overflow: hidden;
width: 160px;
height: 58px;
background: red;
box-shadow: inset 0 0 0 2px #000;
}
.container: after, .container:before {
content: '';
position: absolute;
inset-inline-start: 0;
width: 30px;
aspect-ratio: 1;
background: #ffffff;
border-radius: 100%;
inset-block-start: 50%;
transform: translateY(-50%) translateX(-50%);
box-shadow: inset 0 0 0 2px #000;
}
.container: before {
inset-inline: auto 0;
transform: translateY(-50%) translateX(50%);
}