CSS tabs issue

HTML

<body>
  <div class="tabs">
    <div class="tab active">Foo</div>
    <div class="tab">Bar</div>
  </div>
</body>

CSS

body {  background: #fff; }

.tabs {
  border-bottom: 1px solid #000;
}

.tab {
  display: inline-block;
  border: 1px solid #000;
  margin: 0 5px;
  padding: 5px;
  
  transform: translate(0, 1px);
  -webkit-transform: translate(0, 1px);
}

.tab.active {
  border-bottom-color: #fff;
}