Border-image differs differently between Chrome and FireFox

Question

I am currently playing with CSS3 border-image and notice that there are differences in how the image is applied between Chrome and FireFox (latest versions).

I have a very simple example in which I use border-image tags for some textarea tags to learn different effects.

In FireFox, the image is partitioned and applied to borders, as expected. The center is transparent as I expected.

In Chrome, it does the same with borders, but also shows the center of the image.

Is there any default parameter / style that is applied by the browser, causing transparency in one browser, but not it?

Is it possible to override a parameter / style?

Scenario

Edit

I assume that browsers just do this, if I can’t ove-write the behavior in CSS, what can I do to ensure the images are the same between the two browsers?

If the script is out of date, I have included the code below.

HTML:

 <textarea class="no-image">some default text</textarea> <textarea class="stretch">some default text</textarea> <textarea class="round">some default text</textarea> <textarea class="repeat">some default text</textarea>​ 

CSS:

 textarea{ border: 50px solid #feb515; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; width: 500px; height: 100px; padding: 15px; border-image-slice: 5; } textarea.stretch{ border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch; -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch; -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch; } textarea.round{ border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch; -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch; -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch; } textarea.repeat{ border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round; -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round; -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round; }​ 

Answer 1

So, I got his job - I'm not sure why it works, though.

http://jsfiddle.net/6ysfr/2/

I think it may be that your border width should match the number indicated in the border image, and I think that the slice of the border image may be corrupted.

Nevermind - I think this is exactly what you say - using the border-image slice causes odd behavior with "fill" in chrome. My example works because it lacks a border slice offset.