CODEWITHSUNDEEP
htmlcssimageborder
BigTech
BigTech

Reputation: 460

Border image not displaying

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>

Upvotes: 8

Views: 30026

Answers (2)

Gervas Mshamu
Gervas Mshamu

Reputation: 1

You have to specify the border style

.border {
    border-image: url('border.png') 25% round;
    border-style: solid;
}

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

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/

Upvotes: 17

Related Questions