CSS border color issue

Question

I am trying to put a red border of 1px and I have a problem. The top and bottom of the border are red, but not the left and right.

If I change the color, pink for example, the issue disappears.

Any idea?

 div.red-border { border: solid 1px red; } 

  <div class="red-border"> <p>Hi!</p> <p> I'm trying to put a red border</p> </div> 

Answer 1

Checking Firefox Quantum your border works, and you are using the shorthand for border styling, but in a different order. I think this order is better, so does the MDN site covering the CSS spec , and more common:

1px solid red

 div.red-border { border: 1px solid red; } 

 <div class="red-border"> <p>Hi!</p> <p> I'm trying to put a red border</p> </div>