At the moment so:

enter image description here

How to make sure that the active tab does not have an underscore? It is possible to alter somehow, the main thing is not to use something like margin-top: -1px .

enter image description here

https://jsfiddle.net/ox3kx17c/1/

 .tabs { margin-bottom: 20px; border-bottom: 1px solid #bfbfbf; } .tabs a { text-decoration: none; display: inline-block; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; font-size: 18px; color: #444444; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .tabs a.active { background: #ffffff; border: 1px solid #bfbfbf; border-bottom: none !important; color: #1e7ec8 !important } 
 <div class="tabs"> <a href="#" class="active">Настройки</a> <a href="#">Мои заказы</a> <a href="#">Test</a> </div>

2 answers 2

 * { box-sizing: border-box; } .tabs { margin-bottom: 20px; font-size: 0; position: relative; } .tabs a { text-decoration: none; display: inline-block; padding: 10px 15px; font-size: 18px; color: #444444; border-radius: 10px 10px 0 0; } .tabs a.active { position: relative; background: #ffffff; border: 1px solid #bfbfbf; border-bottom: none; color: #1e7ec8 !important; } .tabs:before, .tabs a.active:before { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: #bfbfbf; } .tabs a.active:before { background: #fff; } 
 <div class="tabs"> <a href="#" class="active">Настройки</a> <a href="#">Мои заказы</a> <a href="#">Test</a> </div>

  • Thanks a lot for your help! :) - ModaL

Fix the height of the tab and the height of the container. Add an active tab to the lower border under the background color of the page.

 .tabs { margin-bottom: 20px; border-bottom: 1px solid #bfbfbf; height:42px; } .tabs a { text-decoration: none; display: inline-block; padding:10px 15px; height:21px; font-size: 18px; color: #444444; border-radius:10px 10px 0 0; } .tabs a.active { background: #ffffff; border: 1px solid #bfbfbf; border-bottom-color:#FFF; color: #1e7ec8 !important; } 
 <div class="tabs"> <a href="#">Настройки</a> <a href="#" class="active">Мои заказы</a> <a href="#">Test</a> </div>