How to Create Repetitive Image Borders in CSS3

By John Paul Mueller

One of the more common uses for repetitive images in CSS3 is to create borders made of images. Unfortunately, this technique doesn’t work well with Internet Explorer 9. It does work, however, with all newer versions of Chrome, Firefox, and Internet Explorer 10. The following procedure takes the SimpleGraphics example created earlier and adds a paw-print border to it.

  1. Open the SimpleGraphics.HTML file.

    You need to modify the page so that there’s a new <div> to hold the margin, which really isn’t part of the image. If you try to attach the margin graphics to the existing image container, the graphics will appear centered on the image container’s margin, rather than as full images.

  2. Add a new <div> to the page as shown here.

    <div id="BorderContainer">
     <div id="ImageContainer">
     <img alt="A Picture of a Cute Cat."
      title="A Picture of a Cute Cat."
      src="CuteCat.JPG" />
     <p>A picture of a cute cat!</p>
  3. Modify the <link> tag so it looks like this:

    <link rel="stylesheet"
     href="BorderGraphics.CSS" />
  4. Save the HTML file as BorderGraphics.HTML.

  5. Open the SimpleGraphics.CSS file.

    You need to change the styles so that they’ll work with the new containers found in the HTML file. Think about the border being a box that encloses a box holding the image and caption. What you get instead of a single image box is a box within a box.

  6. Add a new #BorderContainer style like the one shown here.

     border-style: solid;
     border-width: 20px;
     url(PawPrint.GIF) 25 22 23 fill round;
     padding: 24px;
     float: left;
     position: absolute;
     height: 465px;
     width: 440px;
     left: 50%;
     margin-left: -244px;

    Most of these properties are the same as those originally used for the #ImageContainer style. The BorderContainer <div> is now the outer container, so you position it rather than the ImageContainer <div>. There are some changes in measurements to accommodate the size of the border.

    The biggest change is the addition of the border-image property. You supply the URL of the image you want to use, along with the inward offset of the border image, the width of the image, and the image outset.

    The fill value tells the browser to fill the <div> with copies of the image and the round value tells the browser to resize the image so that an even number of images fill the <div>.

    Figuring out the numbers for a border image can be difficult and time-consuming. Fortunately, you can use the border-image-generator to do the work for you. Simply provide the location of the border image you want to use and then use the sliders to figure out optimal values for placing that image around a <div>. You can copy the results directly from the page to your application.

  7. Modify the #ImageContainer style so that it reflects its new role as an inner container.

     margin: 20px;
     height: 420px;
     width: 400px;
     background-color: White;
  8. Save the CSS file as BorderGraphics.CSS.

  9. Load the BorderGraphics page.

    You see the page. Notice that the border graphics surround both the image and its caption.