Border image not displaying

Question

I am using border image code something like this, but it is not working:

CSS:

#container{
    float:left;
    position:absolute;
    font-size:56px;
    font-family:arial;
    top:400px; left:200px;
    border-bottom-image:url(images/border_bg.png);
    -webkit-border-image:url(images/border_bg.png) 30 30 round; 
    -o-border-image:url(images/border_bg.png) 30 30 round;
    border-image:url(images/border_bg.png) 30 30 round;"
}

HTML:

<div id="container">WE'VE GOT YOU COVERED.</div>

Answer 1

You have some syntax errors.

Here is a working example:

#container {
    font-size:56px;
    font-family:arial;
    border-width: 50px;
    border-style: solid;
    border-image: url(http://placekitten.com/100/100) 25% round;
}

You need to set a border width and style in order to create some space for the border image to appear.

See reference: http://www.w3.org/TR/css3-background/#border-images

See demo at: http://jsfiddle.net/audetwebdesign/JdEkB/