Div's with same content and same style have different dashed borders [duplicate]

Question

So I created a pen about it, as you see the first div has border-bottom and the second border-top. But the second div's border is different than first's.

http://codepen.io/Chrez/pen/meRxBW

<div class="first"></div>
<div class="second"></div>

Screenshot in Firefox:

Answer 1

That's going to be a rendering issue from your browser. It looks like it's working fine in Chrome but latest Firefox and IE are showing different borders like you said.

If you really must have it fixed I would recommend using pseudo elements with their border-top parameters set to the same value.

.first:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top:1px dashed #FFFFFF;
    height: 1px;
}

http://jsfiddle.net/st9uesqd/