CODEWITHSUNDEEP
htmlcssfirefoxmozillaborder-image
Tony Bogdanov
Tony Bogdanov

Reputation: 7686

Border-image breaks in Mozilla Firefox

When trying to apply a "stripy" border-image to a text input field it breaks in Mozilla Firefox under certain parameters.

Take a look at this jsfiddle: http://jsfiddle.net/sxpL9zw1

As you can see the page renders a simple text field with a black stripy border around it. This fiddle actually works just fine in any browser I've tried.

However, things get really weird when I run the exact same markup on my host or on localhost: http://test.tonybogdanov.com/border-image-mozilla-issue/

Here's what I see when I open the URL with the latest Mozilla Firefox (35.0): enter image description here

As you can see the left and right borders render properly, but the top and bottom ones are somehow "solid" looking. I've also tested this in IE10, Chrome, Opera and Safari on Windows and they all show the border just fine, except Firefox.

Furthermore, when I increase the border-width above 9px the issue disappears, which also happens when I remove the width property.

Any ideas what might be causing this or why can't I reproduce it in a jsfiddle?

P.S. I also tried this by drag-and-dropping the HTML file in Firefox (to rule out any host-related issues) and it still fails. Here's a zip to try it yourself: http://test.tonybogdanov.com/border-image-mozilla-issue/files.zip

Upvotes: 0

Views: 138

Answers (1)

Jon Holland
Jon Holland

Reputation: 401

Welcome to one of the most counter-intuitive bits of CSS.

You can use this tool: http://border-image.com/ with your image and work out what the correct offsets and border sizes should be. (You can preview the border around the CSS text at the bottom)

Good luck

Upvotes: 0

Related Questions