CSS: How to make an image-border

Question

I'm trying to place a border image around a div. I followed the hints on css-tricks but I can't get it to work. This is the page: http://darylkeep.com/aanbod/

EDIT: I get four little borders in the corners instead of one around the whole div. Why is this?

I'm also wondering if this is still the way to go to do this since I haven't run across this property before. Is there a better way? Thanks in advance.

<div id="main-content">stuff</div>

.

#main-content {   
  margin-top: 30px; margin-bottom:30px; padding:20px 20px 20px 20px; width:80%;
  background:rgba(255, 255, 255, 0.7);  
  border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -moz-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -webkit-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -o-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -ms-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  border-image-slice:2,8% 1,7% 2,8% 1,7%; 
  border-image-repeat: stretch;
  border-image-width:100px;
  border-width:50px;
  border-style: solid;
}

Possible duplicate of [How to make CSS border-image work](http://stackoverflow.com/questions/7860114/how-to-make-css-border-image-work) — Ricky, Sep 08 '16 at 15:09
You can find your answer here: http://stackoverflow.com/questions/7860114/how-to-make-css-border-image-work?rq=1 — Ricky, Sep 08 '16 at 15:09
`http://` made them visible but now I have a border in each corner. — Stef, Sep 08 '16 at 15:53

score 1 · Answer 1 · answered Sep 08 '16 at 15:40

It seems like the images you are trying to load are blank. In any case, the code below is a simplified version of what you have.

#main-content {   
  border: 50px solid #cc4242;
 padding: 15px;
 border-image-source: url('http://codeitdown.com/samples/zigzag_red.png');
 border-image-slice: 10;
 border-image-repeat: round;
}

<div id="main-content">stuff</div>

score 1 · Accepted Answer · answered Sep 08 '16 at 16:01

CSS

div{
width:300px;
height:auto;
padding:25px;
border:10px solid #999;
text-align:justify;
position:absolute;
top:25%; 
left:35%;
border-image:url(Light-green-elegant-embossed-frame-rectangular-powerpoint-border.png) 20 repeat;
}

HTML

<div>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>

score 0 · Answer 3 · answered Sep 08 '16 at 15:36

I don't know if I have oversimplified your request, but can you consider the following solution?

https://jsfiddle.net/5asgtLr3/

<html>
    <head>
        <style>
            div.border{
                background-image: url(http://www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;    
            }
            div.content{
                color:white;
                padding: 30px 40px 30px 40px;
            }
            body{
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="border">
            <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a varius libero, at luctus urna. Donec vel hendrerit quam. Duis scelerisque orci ornare sapien pharetra commodo. Ut elementum nisl et vehicula elementum. Fusce porta arcu tincidunt nunc elementum pharetra. Ut vitae placerat est. Vivamus faucibus iaculis augue vel pharetra. Praesent vel vulputate ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sodales porttitor lectus in sagittis. Donec in ligula lorem. Sed scelerisque, ipsum a maximus viverra, lectus sapien gravida libero, a facilisis erat felis eu magna.
            </div>
        </div>
    </body>
<html>

This is fine if you only look at it on a desktop, but if the div gets stretched on mobile phones it doesn't look so good. Thanks for your suggestion — Stef, Sep 08 '16 at 15:50

CSS: How to make an image-border

3 Answers3