border-image-slice: 80; 
   border-image-width: 10px; 
   border-image-outset: 5px; 
   border-image-repeat: stretch stretch; 
   border-image-source: url("http://php-webdev-with-mysql-tompk7.c9users.io/WebRPG/images/border03.svg");
   border-style: solid;

I've added an svg image border to several inputs on a project using css and I can get it to render properly in every browser I've tried except firefox (first screenshot). I've applied the stretch effect to both the horizontal and vertical slices however it appears to be repeating in the center instead of stretching. The documentation seems to indicate that it's supported so after an hour of searching I thought it might be a bug in the browser (I hope I'm wrong). I'm running firefox version 48.0 on windows 10 and I've ended up with the following code: button{ border-image-slice: 80; border-image-width: 10px; border-image-outset: 5px; border-image-repeat: stretch stretch; border-image-source: url("http://php-webdev-with-mysql-tompk7.c9users.io/WebRPG/images/border03.svg"); border-style: solid; } I thought it might be interference by other css i had written so i tested it using a code generation site but the outcome was the same (second screenshot). Thanks for your time.