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?
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>Add margin-bottom: -1px to a tags in .compare_header_box_items div
Thus code will become:
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
margin: 0 0 -1px; /* add this line */
}
The reason your code not working is, main div border begin when inner links area ends which includes their borders too. Thus adding a 1 pixel negative margin will make them two borders overlap.
As a hot fix, just add: margin-bottom: -1px;
check below code snippet.
.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 #fff;
margin-bottom: -1px;
}<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>