There are two tabs that are in the active state and have 1px solid when hovering, but not in the standard state. The problem is that the border of both tabs, when you hover on the next from the active, becomes 2px. Tell me how you can fix it without moving the blocks.

.active, .off { float: left; background-color: transparent; border: none; outline: none; cursor: pointer; padding: 10px 20px; font-size: 15px; box-sizing: border-box; border: 1px solid #ccc; } .off { border: 0; } .off:hover { border: 1px solid #ccc; } 
 <div> <button class="active">Активная</button> <button class="off">Вкладка</button> </div>

    1 answer 1

    When inactive, do border: 1px solid transparent , and with active border-color: #000 , if I understand you correctly. For a more accurate description of the problem, I advise you to attach a part of the code.

    • Added code, look. - Stas
    • I understand you correctly, and instead of border: 0, make border-color: transparent - DiDex