How to remove bottom 1px inline block (CSS)?

Question

I will talk about this screenshot in my explanation:

I have tabs, as you see in the picture. I wanted the active tab (the house in the picture) to have a 1px black line, so I used the bottom border. However, it is difficult to see, but the pink background extends to this entire line. I would like the pink color to stop drawing at the bottom of the tab, excluding the border, if there is one (so only 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 this pink background) and the active tab. In main_tabs, I tried playing with the background size, but didn't change anything. I tried to mess around with the width and display, but that completely messed up my tabs.

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 at the original <li> height, so it looks something like this.

Use the css box-sizing:border-box property to merge it to its 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; }