Почему в Chrome всегда добавляется радиус границы 1 пиксель, даже если для определенных углов задано значение 0 пикселей?

Question

Когда вы применяете border-radius к элементу в Google Chrome, я заметил, что все углы получают тонкий округленный угол в 1px, даже если для определенных углов задано значение 0px.

Учитывайте следующее:

.box { float: left; margin: 5px; width: 25px; height: 25px; border: 1px solid #888; }
.box1 { border-radius: 0; }
.box2 { border-radius: 1px; }
.box3 { border-radius: 0 0 5px 5px; }

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

Первые два поля являются элементами управления для этого эксперимента;как и следовало ожидать, прямоугольник № 1 имеет красивые острые углы, а прямоугольник № 2 имеет тонкие закругленные углы в 1 пиксель.Пока все хорошо.

Странно то, что прямоугольник № 3 также имеет закругленные углы в 1 пиксель сверху , несмотря на то, что значение его радиуса границы равно 0 0 5px 5px.Если вы посмотрите на вычисленные значения в инструментах разработчика, то border-top-left-radius и border-top-right-radius правильно настроены на 0px, но они отрисовываются так, как будто они установлены на 1px.

Вам нужен орлиный глазчтобы увидеть это, но это определенно есть.Вот скриншот страницы в Chrome, которую я увеличил с помощью Photoshop, чтобы ее было легче увидеть:

Обратите внимание, что верхние углы на рамке № 3более мягкий / белый серый, чем остальная часть границы.Они идентичны закругленным углам в 1px поля №2, даже если они установлены в 0px.

Почему Chrome делает это и как я могу предотвратить это?

Длязапись, я нахожусь на Windows 10, и я использую последнюю версию Chrome (v74.0.3729.108).Проблема существует только в Chrome, а не в Firefox или Edge.Я не уверен, что это проблема WebKit или что-то специфическое для Chrome / PC.

Answer 1

Я придумал одно возможное решение для перфекционистов пикселов, таких как я, которых беспокоит эта ошибка Chrome:

Если вы еще не используете :before для чего-то еще в вашем элементе, вы можете использовать этоналожить элемент с верхней границей в 1 пиксель того же цвета, что и граница базового элемента, и он будет отображаться с острыми углами.Это хакерство, но оно работает.

.box { float: left; margin: 5px; width: 25px; height: 25px; border: 1px solid #888; }
.box1 { border-radius: 0; }
.box2 { border-radius: 1px; }
.box3 { border-radius: 0 0 5px 5px; }

.box4 { border-radius: 0 0 5px 5px; position: relative; }
.box4:before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 1px; border-top: 1px solid #888; }

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>

Рамка № 4 теперь отображается с острыми углами сверху.

Конечно, если ваши неокругленные углы не находятся на одной стороне друг с другом (например, они - угол котенка), решение будет более сложным, но это все же возможно при комбинации :before и :after.