Home/ Questions/Q 8642301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T11:44:24+00:00

I’m currently playing around with CSS3 border-image and noticed that there are differences in

  • 0

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

I have a very basic example I’m messing around with whereby I’m applying the border-image to some textarea tags to study the different effects.

In FireFox the image is split into the sections and applied to the border sections as expected. The center is transparent as I would expect.

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

Is there some default setting/style which a browser applies, causing the transparency in one browser but not he other?

Is that a setting/style I can override?

The Fiddle

Edit

I suppose, seeing that the browsers simply just do that, if one can’t
ove-write the behaviour in CSS, what could I do to ensure the images
are applied the same between the 2 browsers?

In case the fiddle goes stale I included the code below as well.

The 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>​

The 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;
}​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So I’ve gotten it working – I’m not sure why it’s working though.

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

    I think it may be that your border width needs to match up with the number specified in border-image, and I think border-image-slice may be messing things up.

    Nevermind – i think it is exactly as you say – using border-image-slice causes odd behavior with the ‘fill’ in chrome. My example works because it is missing the offset of the border slices.

    • 0