I need help with a wordpress website I'm working on currently. What I'm wanting to do is add an image border around the images. I have absolutely no idea how to do it and I'm a little bit confused! This is the code I have so far. I'm not really familiar with using images as borders so any help would be great. I have a full size border that just needs to go around the image.

.item_image {
width: 232px;
height: 170px;
padding-left: 40px;
padding-right: 40px;
border-image: url("/images/border.png") 30 30 30 30;
}

Here is a link to the image of the border Click Here

Recommended Answers

All 5 Replies

So for this to work, you have to apply the style to your target images by assigning the style name to the class attribute.

For example class="item_image". Secondly, this CSS3 style is works for Firefox and Crome. For Safari and Opera, you need to add their vendor prefixes. Also, IE doesn't support it.

Finally, according to the path you provided, the border image would need to be stored in that specified folder.

Thanks for the reply. I have this code here

.item_image {
width:232px;
height:170px;   
padding-left:40px;
padding-right:40px;
-moz-border-image:url(images/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(images/border.png) 30 30 stretch; /* Safari */
-o-border-image:url(images/border.png) 30 30 stretch; /* Opera */
border-image:url(images/border.png) 30 30 stretch;


}

I have applied the style name to the class. My problem is I don't understand the "30 30 stretch". I want the image to appear just like the image I linked to.

I managed to fix it :) Thanks anyway

Ok good to hear.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.