Use border image only for bottom border? Our CSS seems to replicate the image across the whole div instead
Method 1: set 0
width to all (except border-bottom
):
border-image:url("http://lorempixel.com/g/400/100/?example.jpg");
border-top:0;
border-left:0;
border-right:0;
// btw, you can use "one-line" command> border-width: 0 0 3px 0;
Method 2: with style.css, create ::AFTER
phseudo-element:
.yourDiv::after {
content:"";
height:20px;
width:100%; /* or i.e: 500px */
background:url("http://lorempixel.com/g/400/100/?example.jpg");
}
Try with -webkit-border-bottom-image . Don't forget to include non-webkit browsers. Here is an useful link : http://css-tricks.com/understanding-border-image/
You've defined it to repeat as "round": http://www.w3schools.com/cssref/css3_pr_border-image-repeat.asp
Here's how you can define each individual attribute:
div { background:gray;
width:100px;
height:100px;
margin-left:20px;
-webkit-border-image:url(http://www.panabee.com/images/dumpling/footer_list.png);
-webkit-border-image-width: 0 0 8px 0;
-webkit-border-image-repeat: stretch;
border-image: url(http://www.panabee.com/images/dumpling/footer_list.png);
border-image-width: 0 0 8px 0;
border-image-repeat: stretch;
}