CODEWITHSUNDEEP
htmlcss
user2956454
user2956454

Reputation: 15

CSS borders image border for div element

Why does a single image appear in all the four corners? I only want one image to display

Does anyone have any suggestions?

<html>
    <style>
        div.one{
            border-style: inset;
            border-width:50px;
            border-image-source:url(border1.png);       
        }
    </style>

    <body>
        <div class="one">
        </div>
    </body>
</html>

Upvotes: 0

Views: 96

Answers (3)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

No, border-image-source is not supported by any browser.

Use border-image instead:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

In your case:

div.one
{
 border-style: inset;
 border-width:50px;
-webkit-border-image:url(border1.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border1.png) 30 30 round; /* Opera */
 border-image:url(border1.png) 30 30 round;
}

Check this fiddle: http://jsfiddle.net/65adr/55/

Upvotes: 2

Mr.G
Mr.G

Reputation: 3559

Try this it work all browsers:

div.one
{
 border-style: inset;
 border-width:50px;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
 border-image:url(border.png) 30 30 round;
}

Upvotes: 0

R&#225;pli Andr&#225;s
R&#225;pli Andr&#225;s

Reputation: 3923

border-image-source is a new CSS3 property, which is not yet supported by any of the browsers. Use divs or something else instead to contain images.

Upvotes: 0

Related Questions