Member Avatar for kimmi_baby

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

  • 2 Contributors
  • 5 Replies
  • 119 Views
  • 42 Minutes Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

If the goal was a decorative frame around each image, a few clarifications will help future readers. The numbers you saw (for example 30 30 stretch) are the slice values and the repeat mode. The slice values tell the browser how many pixels to cut in from each edge of the frame image (they define the nine-slice grid: four corners, four edges, and the center). The repeat mode (stretch, repeat, round, space) controls how the edge pieces are drawn along each side. Also note: border-image paints into the element�s border area — so you must give the element a non-none border-style and an appropriate border-width so the frame has space to show.

A clearer, more robust approach is to use the longhand properties rather than a compact shorthand. That avoids ambiguous parsing and makes it obvious you need a border width and style:

.item_image {
  border-style: solid;               /* required for border-image to appear */
  border-width: 30px;                /* room for the frame */
  border-image-source: url("images/frame.png");
  border-image-slice: 30;            /* slice 30px from each edge */
  border-image-repeat: stretch;      /* how the edges are drawn: stretch/repeat/round/space */
}

As mentioned, vendor prefixes were used by older browsers. Today most modern browsers support border-image without prefixes, but very old browsers (and older IE versions) may not. For broad compatibility you can provide a fallback by wrapping the image and using a background image or a pseudo-element for the frame, for example:

.framed {
  display: inline-block;
  padding: 30px;                      /* space for the frame */
  background-image: url('images/frame.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.framed img { display:block; }

If you need precise pixel-perfect framing, measure the frame file in an image editor to pick exact slice values. For current behavior and browser support, see the MDN docs on border-image and the live compatibility table on Can I Use: MDN: border-image and Can I Use: border-image.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

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.

Member Avatar for kimmi_baby

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.

Edited by kimmi_baby
Member Avatar for kimmi_baby

I managed to fix it :) Thanks anyway

Member Avatar for JorgeM

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.