Give CSS style div "border-left-image"

Question

Just trying to provide the main content of the div on the site with a frame to the left and right of the div. Instead of having separate divs for each border, I was thinking of using the border-left-image function in CSS3 to make this happen. My code is as follows:

 #content { background-color: #7FC3F4; height: 100%; width: 900px; border-left-width: 30px; border-left-image: url(../images/border_left_gradient.png); border-right-width: 30px; border-right-image: url(../images/border_right_gradient.png); margin-right: 10%; margin-left: 10%; } 

Of all the Google searches I have done, I still need to find out why this code is invalid. Some results return numerical values ​​that should be placed after the URL, however no matter what combination of numbers I try, there are no dice.

Thoughts?

Answer 1

border-image now supported in all major browsers (2014-05-22)

Demo with a single border-left-image

Demo with different left and right images.

The demo now requires a minimum of Chrome 15, Safari 6, Firefox 15, IE 11, or Opera 15.

it is not possible to do this with separate image files, but you can slice one image left and right. See the border-image MDN page for some good examples or CSS Tricks for a full description of how other slicing options work.

Note. If you need earlier browser support, ask how the previous version of my answer really worked with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10, but I updated it now that new browsers support without CSS3 prefix.

Edit: Firefox now requires an additional property setting - border-style: solid (see CSS - the new Firefox release no longer shows Border-Image )

Answer 2

Good solution: compatibility with Chrome and Firefox:

http://jsfiddle.net/Yas34/954/

missing border-style: solid for the current "good answer"

Answer 3

For one, your URL is dummy (..images?). did you check for a second that your browser supports the property? the last time I checked that it was not so long ago, no one supported it (well, maybe webkit nightlies).