Elément rendu différemment dans Firefox vs Opera

Question

Je travaille sur un site web et j'ai rencontré un problème de rendu des bordures d'éléments différemment sur Firefox puis sur Opera.

Je serai reconnaissant pour toute suggestion sur la façon de résoudre ce problème.

Picture (Opera on the left, Firefox on the right)

EDIT:CodePen

HTML:

<div class="red-bordered-top-bar"></div> 
<div class="red-bordered-bar" style="height: 256px;"></div> 
<div class="red-bordered-bottom-bar"></div> 

CSS:

.red-bordered-bottom-bar { 
    position: relative; 
    border-width: 0px 0px 15px; 
    border-color: transparent; 
    border-style: solid; 
    border-image: url("../Resources/primary_bottom.svg") 15 15 15 15 round round; 
    background-color: #33393E; 
} 

.red-bordered-bar { 
    position: relative; 
    background-color: #FE634A; 
} 

.red-bordered-top-bar { 
    position: relative; 
    border-width: 15px 0px 0px; 
    border-style: solid; 
    border-color: transparent; 
    border-image: url("../Resources/primary_top.svg") 15 15 15 15 round round; 
    background-color: #33393E; 
} 

Answer 1

Essayez de changer 15 15 15 15 valeur de tranche d'image frontière:

//top  
-moz-border-image: url("https://dl.dropboxusercontent.com/u/35123963/primary_top.svg") 11 15 15 15 round round !important; 

//bottom 
-moz-border-image: url("https://dl.dropboxusercontent.com/u/35123963/primary_bottom.svg") 15 15 11 15 round round !important; 

-moz pour mozilla navigateur