Is it possible to achieve the radius of a border that is curved inside through CSS3?

Question

Is it possible to achieve something like the image above? So far I have tried the following code.

.greyParent {
  height: 19px;
  border-radius: 7px;
  background: rgb(196, 196, 196);
}
.greyParent > .activeSlide {
  background: rgb(0, 97, 188);
  border-radius: 7px;
  border-right: 1px solid #fff;
  float: left;
  width: 20%;
  height: 19px;
  position: absolute;
}
.greyParent > .activeSlide:first-child {
  left: 0%;
  z-index: 5;
}
.greyParent > .activeSlide + .activeSlide {
  left: 16%;
  z-index: 4;
}

<div class="col-xs-4 col-sm-2 col-md-2">
  <span class="slideNo">1/5</span>
</div>
<div class="col-xs-8 col-sm-10 col-xs-9 progressImage">
  <div class="greyParent">
    <div class="activeSlide">

    </div>
    <div class="activeSlide">

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

Run codeHide result

I need to add the div.activeSlide div tag depending on the tab. The problem I am facing is that I am adding 5 div.activeSlide tags for the fifth slide without occupying the entire parent div tag ie div.greyParent. I understand that since I am in an absolute position and trying to move divs to the right, this happens. But since I need to highlight the border of each section, I had to use the absolute position. Can someone help me with this? Is there any solution for this?

Answer 1

:before :after.

• width height / .
• box-shadow 1px 2px, .

:

* {box-sizing: border-box;}

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 20px;
}

ul li {
  position: relative;
  background: gray;
  height: 16px;
  width: 60px;
}

ul li:before,
ul li:after {
  box-shadow: 2px 0 0 #fff;
  border-radius: 100%;
  position: absolute;
  background: gray;
  height: 16px;
  content: '';
  width: 16px;
  left: -8px;
  top: 0;
}

ul li:first-child:before {
  box-shadow: none;
}

ul li:after {
  right: -8px;
  left: auto;
}

ul li.active,
ul li.active:before,
ul li.active:after {
  background: blue;
  z-index: 1;
}

<ul>
  <li class="active"></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Hide result

Answer 2

, , . , , .

, :

.greyParent > div{
  width: 25%;
}
.greyParent > div:nth-child(1){
  left:0%;
  width: 20%;
}
.greyParent > div:nth-child(2){
  left:15%;
}

jsfiddle, ,

Answer 3

Try it, it's good))

<div class="container">
  <div class="title">
    1/5
  </div>
  <div class="progress">
    <span class="active"></span><span class="active"></span><span></span><span></span><span></span>
  </div>
</div>


.container {
  display: flex;
}

.container .title {
  padding-right: 20px;
}

.container .progress {
  display: flex;
  width: 250px;
}

.container .progress span {
  display: block;
  height: 15px;
  width: 20%;
  background: gray;
  border: solid 1px #fff;
  border-radius: 7px;
  margin-right: -15px;
}

.container .progress span.active {
  background: blue;
}
.container .progress span:nth-child(1) {
  z-index: 40;
}

.container .progress span:nth-child(2) {
  z-index: 35;
}

.container .progress span:nth-child(3) {
  z-index: 25;
}

.container .progress span:nth-child(4) {
  z-index: 10;
}

JSfiddle example https://jsfiddle.net/5ph3uk94/

Answer 4

Why don't you just use two blue elements and 3 gray elements instead of one big gray parent?

<div class="col-xs-4 col-sm-2 col-md-2">
  <span class="slideNo">1/5</span>
</div>
<div class="col-xs-8 col-sm-10 col-xs-9 progressImage">
  <div class="parent">
    <div class="activeSlide"></div>
    <div class="activeSlide"></div>
    <div class="diabledSlide"></div>
    <div class="diabledSlide"></div>
    <div class="diabledSlide"></div>
  </div>
</div>