CSS border-left/right not displaying properly

Question

*EDIT

I jumped the gun a little bit, its the border-bottom that causes it.

New question:

Can you remove the picture frame effect from borders?

---

So i have this CSS code on a div:

border-left: 5px solid #009933;

It displays fine in Safari:

But it displays like this in Firefox and Chrome:

So i guess my question is, why does Firefox and Chrome display it differently and how can i make it look like Safari displays it?

Thanks

Answer 1

The exact rendering of border corners differ between browsers.

With thick borders, the browser tries to make a diagonal boundary between the borders. The pixels right in the corner can get the color from one of the borders:

******************
+*****************
++****************
+++***************
++++
++++
++++

or the other border:

+*****************
++****************
+++***************
++++**************
++++
++++
++++

Different browsers will use either of those two approaches, but differently on all four corners of the element. I once compared what different browsers use, and it almost seemed like each browser vendor went out of their way to pick an approach that no other browser used.

In your case Firefox and Chrome happen to use the horizontal border color for the boundary on the bottom left corner.

To get the side borders to go on the outside, ie:

++++******************
++++******************
++++******************
++++******************
++++
++++
++++
++++

you would use one element inside another, and set the vertical borders on the outer element and the horizontal borders on the inner element.

Example (with exaggerated border widths just to show the effect):

 .outer { border: 10px #0c0; border-style: none solid; } .inner { border: 10px #ccc; border-style: solid none; } 

 <div class="outer"><div class="inner">Demo</div></div>