Why are half of my
s being styled differently than the others?

Question

I don't know why, but when I try and style my horizontal rules in css, every other hr looks different. See below:

https://i.imgur.com/ltZdncM

When I increase the border size to 2px, the gap in between the top and bottom borders is filled in, but then half the horizontal rules are thicker than the others.

MY CODE:

hr {
    border: 1px solid #07234f;
    width: 300px;
}

    <body>
        <hr>
        <hr>
        <hr>
        <hr>
    </body>

I expect all the horizontal rules to look similar. Any idea why they look different? How can I fix this issue?

Donkey Shame · Accepted Answer

You're placing a border on all sides of the hr. But Chrome, for example, already has a user-agent stylesheet that sets an inset border style on hr's. I was able to replicate your issue at various px units.

One way to fix this issue is the following:

kill whatever border the user agent stylesheet may be implementing behind your back: border: 0
Then set a border along a single edge (top or bottom) and set it to the px value you'd like. (I chose border-top: 2px.)
Set an explicit height on the hr equal to the pixel value you chose for border-top to prevent (in this case) Chrome's user agent stylesheet from displaying border-style: inset on your element.

hr {
    border: 0;
    border-top: 2px solid #07234f;
    height: 2px;
    width: 300px;
}

<body>
        <hr>
        <hr>
        <hr>
        <hr>
    </body>

Another approach might be to explicitly set the individual border properties yourself so as to avoid confusing Chrome about which border style to apply (it appears that even with border: 1px solid #000000, Chrome still insists on applying the inset styling).

    hr {
        border-width: 2px 0 0 0;
        border-style: solid;
        border-color:  #07234f;
        width: 300px;
    }

UPDATE

One way to implement a double line would be to set a top and bottom border with an explicit height:

    hr {
        border-width: 2px 0 2px 0;
        height: 4px;
        border-style: solid;
        border-color:  #07234f;
        width: 300px;
        margin: 16px auto;
    }

You could also use border-style: double like this:

    hr {
        border-width: 4px 0 0 0;
        border-style: double;
        border-color:  #07234f;
        width: 300px;
        margin: 16px auto;
    }

Also, here's some inspiration for your hr styling needs: https://css-tricks.com/simple-styles-for-horizontal-rules/

It's a bit dated, but may give you some ideas.

UPDATE 2

This works fairly well, though I do still see some aberrations at various zoom levels. Does the following work for you at normal zoom? Is it only when you manually zoom the viewport that you see aberrations?

It's a conundrum.

body {
  background-color: lightblue;
}

hr {
  border: 0;
  width: 300px;
  margin: 16px auto;
  height: 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='300' height='2' viewBox='0 0 376 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cline y1='0.5' x2='300' y2='0.5' stroke='black' stroke-opacity='0.1'/%3E %3Cline y1='1.5' x2='300' y2='1.5' stroke='white' stroke-opacity='0.3'/%3E %3C/svg%3E ");
}

Why are half of my <hr>s being styled differently than the others?

Tags:

css

DirectCherry

1 Answers

Donkey Shame

Recent Activity

Donate For Us