Почему у <hr /> странная черная верхняя граница?

Question

Я положил <hr> внутрь угловых изгибов и линии:

<div layout="column" flex>
      <div><hr style="border-color: green; height: 10px; background-color: green;"/></div>
// other divs
</div>

дает мне следующий результат

Я проверил этот div, и у него есть свойство color: black, но я переопределил его с color: green (есть color:green везде), но результат все тот же. Почему у меня такие странные левые и верхние черные (темно-зеленые) границы?

Answer 1

сохраняя это простым:

<hr style=" border: 0;  height: 1px;  background: green;"/>

Укажите любую высоту, которая вам нравится. Вы должны определить базовую рамку элемента hr как 0 , прежде чем использовать его для различных функций.

Answer 2

Откройте инспектор (щелкните элемент правой кнопкой мыши и выберите «Проверить»), и вы увидите таблицу стилей агента пользователя (стили по умолчанию, применяемые к элементам вашим браузером):

hr {
    display: block;
    unicode-bidi: isolate;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

Обратите внимание на стили по умолчанию border-style: inset и border-width: 1px, применяемые браузером.

Многие люди используют что-то вроде reset.css или normalize.css (Google google), чтобы удалить множество стилей браузера по умолчанию, которые могут быть нежелательными.