How to set inner element border upon the outer one?

Question

Here is my code:

        .compare_header_box{
            padding: 35px 30px;
            direction: rtl;
        }
        .compare_header_box_title{
            font-size: 30px;
            width: 100px;
            float: right;
            margin-right: 5px;
            margin-top: 4px;
        }
        .compare_header_box_items{
            width: 100%;
            border-bottom: 1px solid #ccc;
            direction: ltr;
        }
        .compare_header_box_items a{
            display: inline-block;
            font-size: 16px;
            padding: 15px 40px;
            
        }
        .compare_header_box_items a:hover{
            text-decoration: none;
            background-color: #f1f1f1;
            color: black;
        }
        .compare_header_box_items .active{
            border-top: 3px solid orange;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid white;
        }

        <div class="compare_header_box">
            <span class="compare_header_box_title active">List</span>
            <div class="compare_header_box_items">
                <a href="./gp">gp</a>
                <a href="./in">in</a>
                <a href="./tw">tw</a>
                <a class="active" href="./fb">fb</a>
            </div>
        </div>

As you see border-bottom: 1px solid white; doesn't seem to appear. I want to set it exactly upon the border-bottom: 1px solid #ccc;. How can I do that?

Answer 1

Make use of pseudo elements,

.compare_header_box_items .active {
  position: relative;
  border-top: 3px solid orange;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.compare_header_box_items .active:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  bottom: -1px;
  left: 0;
}

I hope this is what you require

.compare_header_box {
  padding: 35px 30px;
  direction: rtl;
}

.compare_header_box_title {
  font-size: 30px;
  width: 100px;
  float: right;
  margin-right: 5px;
  margin-top: 4px;
}

.compare_header_box_items {
  width: 100%;
  border-bottom: 1px solid #ccc;
  direction: ltr;
}

.compare_header_box_items a {
  display: inline-block;
  font-size: 16px;
  padding: 15px 40px;
}

.compare_header_box_items a:hover {
  text-decoration: none;
  background-color: #f1f1f1;
  color: black;
}

.compare_header_box_items .active {
  position: relative;
  border-top: 3px solid orange;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.compare_header_box_items .active:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  bottom: -1px;
  left: 0;
}

<div class="compare_header_box">
  <span class="compare_header_box_title active">List</span>
  <div class="compare_header_box_items">
    <a href="./gp">gp</a>
    <a href="./in">in</a>
    <a href="./tw">tw</a>
    <a class="active" href="./fb">fb</a>
  </div>
</div>