찾아보니, 해당 이슈는 순전히 웹브라우저가 고해상도 모니터/확대환경 에서 1픽셀을 어떻게 렌더링할 것이냐에 달린 문제 같습니다.

https://stackoverflow.com/a/42718300

... So although your 10px font-size is now really being rendered as 15px, it still shows as 10px in the inspector. To show you that the border has not been scaled up, the 1px is divided by 1.5, giving 0.667px.

... 따라서 폰트 자체는 10px이지만 실제로는 15px로 보여지고 있으므로, 개발자도구에서 검사해 보면 10px이라고 표시가 되지요. 테두리 요소가 확대되었다는 사실을 알려주기 위해서 1px은 1.5로 나눗셈되어야 합니다. 그러면 0.667px이 나오고요.

PS. 이유는 모르겠는데 그냥 직감따라 해보고서 발견한 사실: 현재 데모의 .boxLine 요소에 display: inline-block; 속성을 추가하면 문제가 좀 나아지는 것처럼 보입니다.

PS2. 왜 height: 1px;로 1픽셀짜리 선을 긋고 계신가요? 윗분 댓글처럼 border-bottom: 1px 어쩌구를 쓰면 될 텐데요.