вертикальная линия между элементом div и его собственной границей в хроме

Я указал элемент div с нижней границей, используя тот же цвет, что и сам div, чтобы создать вертикально асимметричное размещение фонового изображения. Однако между элементом div и его границей появляется очень тонкая линия (элемент и его граница имеют цвет #141414, линия шириной 1 пиксель имеет цвет #2c2c2c).

Инструменты разработчика Chrome говорят, что линии не существует, но она все равно видна. Проблема не существует в Firefox или Internet Explorer и проявляется только при одной ширине окна, а не при другой, но при различной яркости.

Он появляется только тогда, когда я использую padding-box на фоне.

HTML

<div id="titleBlock">Title Text</div>

css

#titleBlock {
    background: url("logo2.svg") center center no-repeat #141414 padding-box;
    width: 100%;
    height: 9.25vw;
    text-align: center;
    color: #DCDCDC;
    font-size: 3.3vw;
    padding-top: 20.75vw;
    font-weight: 300;
    border-bottom: #141414 solid 3vw;
}

Кто-нибудь еще сталкивался с этим или знает решение без создания второго div для представления нижней границы?