Добавить границу между div

Question

Как добавить границу между каждым кружком div с помощью CSS?Круги и границы тоже должны быть отзывчивыми.Я попытался добавить граничную линию, но она даже не отображается .. Линия должна быть центрирована посередине между кругами.

.default-step {
  height: 120px;
  max-width: 120px;
  text-align: center;
  vertical-align: middle;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  background: #FFF;
  color: #084085;
  font: 16px "josefin sans", arial;
  cursor: default;
  line-height: 3em;
  justify-content: space-between;
  flex: 1 1 auto;
  align-items: stretch;
}

.steps {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: stretch;
}

.steps div:not(:last-child) {
  border-bottom: 4px solid #0369B3;
}

<div class="steps">

  <div id="circle-step-1" class="default-step">STEP 1</div>

  <div id="circle-step-2" class="default-step">STEP2</div>

  <div id="circle-step-3" class="default-step">STEP 3</div>

  <div id="circle-step-4" class="default-step">STEP 4</div>

  <div id="circle-step-5" class="default-step">STEP 5</div>

</div>

Спасибо!

Answer 1

Вы также можете добавить дополнительный div в качестве делителя.Обратите внимание на класс CSS .divider и добавленный div между кружками.

.default-step {
  height: 120px;
  max-width: 120px;
  text-align: center;
  vertical-align: middle;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  background: #FFF;
  color: #084085;
  font: 16px "josefin sans", arial;
  cursor: default;
  line-height: 3em;
  justify-content: space-between;
  flex: 1 1 auto;
  align-items: stretch;
}

.steps {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: stretch;
}

.steps div:not(:last-child) {
  border-bottom: 4px solid #0369B3;
}

.divider {
  width: 2px;
  background-color: grey;
}

<div class="steps">
  <div class="steps">
    <div id="circle-step-1" class="default-step">STEP 1</div>
    <div class="divider"></div>
    <div id="circle-step-2" class="default-step">STEP2</div>
    <div class="divider"></div>
    <div id="circle-step-3" class="default-step">STEP 3</div>
    <div id="circle-step-4" class="default-step">STEP 4</div>
    <div id="circle-step-5" class="default-step">STEP 5</div>
  </div>
</div>

Answer 2

Может быть простой фон на контейнере:

background:linear-gradient(#084085,#084085) center/100% 5px no-repeat;

.default-step {
  height: 100px;
  max-width: 100px;
  text-align: center;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  background: #FFF;
  color: #084085;
  line-height: 3em;
  flex: 1 1 auto;
}

.steps {
  display: flex;
  justify-content: space-between;
  /*Add this code*/
  background:linear-gradient(#084085,#084085) center/100% 5px no-repeat;
}

<div class="steps">

  <div id="circle-step-1" class="default-step">STEP 1</div>

  <div id="circle-step-2" class="default-step">STEP2</div>

  <div id="circle-step-3" class="default-step">STEP 3</div>

  <div id="circle-step-4" class="default-step">STEP 4</div>

  <div id="circle-step-5" class="default-step">STEP 5</div>

</div>

---

БОНУС

Если вы хотите иметь стрелки, вы можете попробовать это:

.default-step {
  height: 100px;
  max-width: 100px;
  text-align: center;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  background: #FFF;
  color: #084085;
  line-height: 3em;
  flex: 1 1 auto;
  position:relative;
  box-sizing:border-box;
}
.default-step:not(:first-child):before {
  content:"";
  position:absolute;
  height:20px;
  width:10px;
  top:calc(50% - 10px);
  left:-15px;
  background-image:
   linear-gradient(to bottom right,#084085 50%, white 0),
   linear-gradient(to top right,#084085 50%, white 0);
  background-position:bottom, top;
  background-size:100% 50%;
  background-repeat:no-repeat;
}

.steps {
  display: flex;
  justify-content: space-between;
  /*Add this code*/
  background:linear-gradient(#084085,#084085)0 50%/100% 5px no-repeat;
}

<div class="steps">

  <div id="circle-step-1" class="default-step">STEP 1</div>

  <div id="circle-step-2" class="default-step">STEP2</div>

  <div id="circle-step-3" class="default-step">STEP 3</div>

  <div id="circle-step-4" class="default-step">STEP 4</div>

  <div id="circle-step-5" class="default-step">STEP 5</div>

</div>

А вот полный код с прозрачностью :

body {
  background:linear-gradient(to right,pink,lightblue);
}
.default-step {
  height: 100px;
  max-width: 100px;
  text-align: center;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  color: #084085;
  line-height: 3em;
  flex: 1 1 auto;
  position:relative;
  box-sizing:border-box;
}
.default-step:not(:first-child):before {
  content:"";
  position:absolute;
  height:20px;
  width:10px;
  top:calc(50% - 10px);
  left:-15px;
  background-image:
   linear-gradient(to bottom right,#084085 50%, transparent 50.5%),
   linear-gradient(to top right,#084085 50%, transparent 50.5%);
  background-position:bottom, top;
  background-size:100% 50%;
  background-repeat:no-repeat;
}

.steps {
  display: flex;
  justify-content: space-between;
  /*Add this code*/
  background:linear-gradient(to right, transparent 100px, #084085 100px, #084085 calc(100% - 5px),transparent 0) 0 50%/calc((100% - 100px)/4) 5px repeat-x;
}

<div class="steps">

  <div id="circle-step-1" class="default-step">STEP 1</div>

  <div id="circle-step-2" class="default-step">STEP2</div>

  <div id="circle-step-3" class="default-step">STEP 3</div>

  <div id="circle-step-4" class="default-step">STEP 4</div>

  <div id="circle-step-5" class="default-step">STEP 5</div>

</div>