Bordered element position break in some resolutions - html

Question

I made a curved tab list and everything looks good, but the problem is in some resolutions it break position about one pixel, I really want know why this happen technically? and how can I avoid this?
#tabs ul li {
display: inline-block;
padding: 0 10px 0 10px;
border: 1px solid gray;
border-bottom: none;
border-radius: 10px 10px 0 0;
height: 40px;
position: relative;
line-height: 40px;
top: 5px;
margin: 0 -5px 0 0;
min-width: 100px;
}
.active {
border: 1px solid #0061ff !important;
height: 50px !important;
line-height: 50px !important;
border-bottom: none !important;
top: 0px !important;
}
#tabcontent {
width: 200px;
height: 200px;
}
#tab {
border: 1px solid #0061ff;
margin-top: 75px;
border-radius: 10px;
}
#tabs {
margin-top: -68px;
}
.invRadTab1 {
width: 35px;
height: 10px;
background: white;
position: absolute;
bottom: -3px;
left: -33px;
z-index: 9999999;
overflow: hidden;
}
.invRadTab2 {
width: 35px;
height: 10px;
background: white;
position: absolute;
bottom: -3px;
right: -33px;
z-index: 9999999;
overflow: hidden;
}
.invRadTab1 span {
width: 60px;
height: 20px;
background: #fff;
position: absolute;
bottom: 2px;
right: 2px;
border: 1px solid #0061ff;
border-radius: 0 0 10px 0;
border-top: none;
border-left: none;
position: absolute;
}
.invRadTab2 span {
width: 60px;
height: 20px;
background: #fff;
position: absolute;
bottom: 2px;
left: 2px;
border: 1px solid #0061ff;
border-radius: 0 10px 0 10px;
border-top: none;
border-right: none;
position: absolute;
}
li.active::after {
content: "";
display: block;
width: 100%;
height: 2px;
background: white;
position: absolute;
bottom: -2px;
left: 0;
}
<div id="tab">
<div id="tabs">
<ul>
<li><a>Tab 2</a></li>
<li class="active"><a>Tab 1</a><span class="invRadTab1"><span></span></span><span class="invRadTab2"><span></span></span>
</li>
<li><a>Tab 3</a></li>
<li><a>Tab 4</a></li>
</ul>
</div>
<div id="tabcontent">
some content
</div>
</div>
If you want to see this problem, you should run this snippet in full page and zoom in or zoom out (for me on 125% and 90%), my screen is 1920 and another machine is 1366, I don't see any problem in 1920 resolution, but see this break in 1366 resolution also in another screens. how can I fix this issue?