Warum werden Rahmenfarben invertiert, wenn ein Hintergrundgradient angewendet wird?

Ich bin auf etwas Seltsames gestoßen. Wenn Sie einem Element einen gestrichelten weißen Rahmen zuweisen, erscheinen die Farben des Hintergrundfarbverlaufs auf der falschen Seite des Elements wie folgt:

Ich habe das in den neuesten Versionen von Firefox, Chrome, Opera und in IE10 gesehen. IE9 hat jedoch meine beabsichtigte Wirkung.

Mein CSS ist derzeit:

Die Rahmenfarben auf der linken und rechten Seite sind gut, aber da dies in fast jedem Browser passiert, muss ich annehmen, dass dies mein Fehler ist, kein Browserfehler. Was fehlt mir hier?