CODEWITHSUNDEEP
css
user4419336
user4419336

Reputation:

Borders not lining up correct in tabs

I have tabs when is current It adds a border top, border left and border right.

The border left and border right when shown seem to over hang the .tabs border-bottom.

enter image description here

Question how can I make sure that tab is has class .current the border-left and border-right will be even with the .tabs border bottom.

CODEPEN DEMO

CSS

.tabs {
    border-bottom: 1px solid #e4e6e8;
    margin-top: 3rem;
    padding-bottom: 10px;
}

.tabs a {
    padding: 15px;
}

.tabs a.current {
    background: #fff;
    color: #222;
    border-top: 3px solid #ef4123;
    border-left: 1px solid #e4e6e8;
    border-right: 1px solid #e4e6e8;
}

Html

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="tabs">
        <a href="" class="current">Profile</a>
        <a href="" class="">Activity</a>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 41

Answers (2)

Michael Coker
Michael Coker

Reputation: 53664

Set the links to inline-block so that any of their vertical padding/margin/borders will properly affect other elements in the layout, remove the bottom padding on .tabs, and I would use translateY() to push the element down 1px so it overlaps the border on .tabs

.tabs {
    border-bottom: 1px solid #e4e6e8;
    margin-top: 3rem;
}

.tabs a {
  padding: 15px;
  display: inline-block;
  transform: translateY(1px);
}

.tabs a.current {
    background: #fff;
    color: #222;
    border-top: 3px solid #ef4123;
    border-left: 1px solid #e4e6e8;
    border-right: 1px solid #e4e6e8;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="tabs">
        <a href="" class="current">Profile</a>
        <a href="" class="">Activity</a>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Oke Tega
Oke Tega

Reputation: 883

Adjust the padding-bottom for tabs a

.tabs {
    border-bottom: 1px solid #e4e6e8;
    margin-top: 3rem;
    padding-bottom: 10px;
}

.tabs a {
    padding: 15px 15px 12px 15px;
}

.tabs a.current {
    background: #fff;
    color: #222;
    border-top: 3px solid #ef4123;
    border-left: 1px solid #e4e6e8;
    border-right: 1px solid #e4e6e8;
}
<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="tabs">
        <a href="" class="current">Profile</a>
        <a href="" class="">Activity</a>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions