This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Why doesn't the stretch option work when applying a css image border using an svg?

  • 6 iimpendulo
  • 1 inayo le ngxaki
  • 1 view
  • Impendulo yokugqibela ngu hawkpk7

more options

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.

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.
Iqhotyoshelwe imifanekiso ekwisikrini

All Replies (6)

more options

It looks fine with FF48 on my Win 7.

more options

I've temporarily patched it by adding a png converted from the svg and a Firefox only css rule that changes the image, but its looking like id have to do that for every svg i use.

Thanks though.

I still would like to get the svg working lol.

more options

Could you provide a testcase on https://jsfiddle.net/ or http://codepen.io/

more options
more options

It's fixed in 49+ by bug 619500.

more options

ah ok, Thanks for looking into it.