How to remove the bottom 1px of an inline-block (CSS)?

Question

I will refer to this screenshot in my explanation:

I have set up tabs like you see in the picture. I wanted the active tab (home in the picture) to have a 1px black line under it, so I used bottom-border. However, it's difficult to see but the pink-ish background extends for that entire row. I would like the pink to stop drawing at the bottom of a tab, excluding a border if there is one (so just 1px above the bottom).

.main_tabs{
    width:100%;
    display:inline-block;
    background:#FFDEFD;
}

li.active a, li.active{ 
    background:#fff;
    color:#4c4c4c;
    border-radius: 3px 3px 0px 0px;
    border-bottom-color:#000000;
    border-bottom-width:1px;
    border-bottom-style:solid;
    transition:all linear 0.4s;
}

Above is my CSS for main_tabs (which is responsible for that pink background) and the active tab. In main_tabs, I have tried playing around with background-size but it didn't change anything. I tried to fiddle with width and display, but it messed up my tabs entirely.

Answer 1

.main_tabs {
  background: #FFDEFD;
  list-style: none;
  margin: 0;
  padding: .25em .5em 0;
}

.main_tabs li {
  display: inline-block;
}

.main_tabs a {
  display: block;
  text-decoration: none;
  line-height: 2em;
  padding: 0 .5em;
  background: #DDD;
  border-radius: 3px 3px 0px 0px;
  border-bottom: 1px solid transparent;
  transition: all linear 0.4s;
}

.main_tabs .active a {
  background: #fff;
  color: #4c4c4c;
  border-bottom-color: black;
}

<ul class=main_tabs>
  <li><a href=#>Non active</a></li>
  <li class=active><a>Active</a></li>
</ul>

Answer 2

Your border is added in original height of <li> that why it appears like this.

Use css property box-sizing:border-box to merge it in original height.

li.active a, li.active{ 
    background:#fff;
    color:#4c4c4c;
    box-sizing:border-box;
    border-radius: 3px 3px 0px 0px;
    border-bottom-color:#000000;
    border-bottom-width:1px;
    border-bottom-style:solid;
    transition:all linear 0.4s;
}