div with gradient background and rounded corners - css

Question

I've coded this div with a gradient background and rounded corners:
#pill {
font-size: 12px;
height: 40px;
width: 100px;
margin: 0 20px 0 20px;
background: transparent;
background-image: linear-gradient(#080, #cf0 45%, #cf0 55%, #080);
z-index: 1;
text-align: center;
}
#pill::before {
display: block;
content: '';
width: 40px;
height: 40px;
position: absolute;
margin-left: -20px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(21px #cf0 5%, #080);
}
#pill::after {
display: inline-block;
content: '';
width: 40px;
height: 40px;
position: relative;
top: -14.5px;
right: -50px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(21px #cf0 5%, #080);
}
The result with Firefox, at top zoom, is this one:
I'm not satisfied of the way I had to use hardwired values, specially for the ::before element.
Is there a way, without jQuery, to make everything dynamic? I tested the CSS3 border-image-slice, which looked promising, but it seems to refuse a radial-gradient as border image.

Answer 1

More or less your requested result, but created with a shadow
You can play with the shadow parameters to fine adjust it.
#test {
height: 40px;
width: 140px;
border-radius: 20px;
background-color: #cf0;
box-shadow: inset 0px 0px 14px 10px #080;
}
#pill {
font-size: 12px;
height: 40px;
width: 100px;
margin: 0 20px 0 20px;
background: transparent;
background-image: linear-gradient(#080, #cf0 45%, #cf0 55%, #080);
z-index: 1;
text-align: center;
}
#pill::before {
display: block;
content: '';
width: 40px;
height: 40px;
position: absolute;
margin-left: -20px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(circle 21px, #cf0 5%, #080);
}
#pill::after {
display: inline-block;
content: '';
width: 40px;
height: 40px;
position: relative;
right: -50px;
z-index: -1;
border-radius: 40px;
background-image: radial-gradient(circle 21px, #cf0 5%, #080);
}
<div id=pill></div>
<div id=test></div>