Как исправить баг с динамической шириной border и блоком заливки внутри?

Question

[madc0de]

Есть кнопка button у которой задан border: .3vw solid red; То-есть динамический размер от ширины экрана, а внутри лежит :after с position: absolute для заливки, но почему то не понятные границы белые появляются, такое чувство что рамка которую определяет браузер больше той которую браузер может задать для границы.

Есть решения? Или мысли на это счет?


Заливка нужна для ввизуальной загрузки и обработки формы. Код пример:
https://jsfiddle.net/32vfsqhe/

Comments

[Ankhena]

Сначала нужно объяснить зачем нужен псевдо для заливки фона.
Потом выложить свой код с воспроизводимой проблемой в песочницу, чтобы мы знали что у вас в коде.

[madc0de]

Ankhena, обновил

[Ankhena]

madc0de,
Похоже на проблемы округления.
Прибавьте по точечке высоты и ширины псевдо

[madc0de]

Ankhena, не понял про точки, можете обьяснить?

но как видно, сам блок заполняется полностью, и проблема в бордере

[Ankhena]

madc0de, типа того height: calc(100% + 2px)

Либо попробовать заменить бордер на тень.