making the border for the radial gradient also-CodePudding

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>

CodePudding user response：

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 >
    </div>    
    <div >
   </div>
   
   MY TEXT HERE! Please put more text here
  </div>

CodePudding user response：

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%);
}