CSS Image Frames Style Tutorial

Learn to style ornate image frames using CSS border & background-image properties.

Okay, so you've just finished your latest Web graphic masterpiece or edited your favorite photograph, and now you want to present it to the world! You know it's good, in fact it's more than good, it's perfect. So perfect in fact, that maybe, just maybe, you wish you could frame your web graphic masterpiece or prize-worthy photo. Not that your work needs any graphic enhancements. Oh no! Still, a nice image frame would be so appropriate. Yeah, a nice picture frame, a CSS picture frame!

CSS Image Frames are as easy to create as CSS image frame styles are easy to write! Even more, they are fun! First a little background reading might be helpful. Learn about the CSS2.1 Border Property and the CSS2.1 Background Property. Next, review this illustration: CSS Image Frame Structural Elements. As you can see, the CSS Image Frame consists of nested divs that have background image property and border assignments.

Assembling the CSS Image Frame

Building a CSS Image Frame is simple. Start with your chosen image or photo, wrap it with the div, and apply your first set of styles: <div class="black m2 bp5">. The example here uses three classes for the first, or inner, div: "black" provides a matching background color, "m2" the margin and "bp5" the border style.

The second div used in the CSS Image Frame example is styled using the following border, background and marging classes: <div class="purple-glass m2 bp5">. The first class, .purple-glass {background: #9040d3 url(assets/purplelace2.jpg);}, provides the background image and color for the second-tier image frame.

The background color style is optional and will only be displayed until the background image is rendered. The classes .m2 {margin: 2em;} and .bp5 {border: 5px inset #9040d3;}, provide the margin used to set up the next and last tier of the CSS image frame as well as providing an inset border for the second-tier image frame div.

The third and final tier, the outmost "frame border," is styles so: <div class="purple-moons mr1 mb2 bp5 l">. The class .purple-moons {background: #9040d3 url(assets/moonstar.jpg); provides the background for the outer image frame, while mr1, mb2 and bp5 provide the margins and outer div border. The remaining CSS class assignment, .l {float: left; clear: left;}, floats the completed CSS image frame.

It is important to note, that when CSS border image frame styles are used in conjunction with the CSS float property, width assignments are not required to size the divs used to frame the image. Regardless of the size of the framed image, FLOAT will automatically control the margins ans width of the nested divs. If the CSS image frame is not floated, then the div components need sizing. I'll demonstrate this, and provide templates, in the next CSS Image Frame installment

CSS Image Frame Code Example

A total of three divs are used to create the effect. Two are nested, the inner-most div contains the actual image and provides the first CSS border. The second div is used to create the "purple-glass" background border, while the third div, the parent container, is styled using a "purple-moons" background.

The multiple classes assigned to each div, allows for maximum flexibility and style efficiency. Rather than create large style blocks for each CSS image frame, multiple classes are deployed in a "mix n' match" fashion.

Using multiple classes is key to the flexibility of CSS image frames. You can simply modify a background or border style to create a new frame. In fact, used in conjunction with alternate style sheets, it is possible to create an image frame gallery that displays various image frame choices.

The following is the code used for the first image on the left and shown as applied, in the bottom-left illustration. Study the multiple class assignments and note how each style grouping works in conjunction with the others. Note how the nested divs create a tiered frame structure, with each level setting-up the next. While it may appear complex, it is really quite simple. By all means experiment with different background and border styles. Have fun creating your own special CSS border image frame styles!

Image Frame HTML and CLASSES used for picture frame "Purple Moons"

  <div class="purple-moons mr1 mb2 bp5 l">
    <div class="purple-glass m2 bp5">
      <div class="black m2 bp5">
        <img src="assets/missing-you.jpg"
        alt="CSS border style image frame"
        width="300" height="300" />
      </div>
    </div>
  </div>

The image frame border styles technique is so versatile, and allows for such creativity, that it is sure to become very popular, very quickly. Learn how to make custom glass globes with the Glass Globe Tube Tutorial for PSP.

More CSS Image Style Tutorials

Here are additional CSS Image Style Tutorials you might find interesting: [ CSS Image Text Wrap | CSS Scale Image HTML Tutorial | Triple Border Background CSS Tutorial | Double Border Background CSS Template ]

Useful references: [ HTML Named Colors Reference | HTML Named Colors Gray Shades | Character Entity HTML Reference ]

Styles used to create the CSS Image Frames displayed on this page.

  img {border: 0;}

  .purple-moons {
  background: #9040d3 url(assets/moonstar.jpg);
  }

  .purple-glass {
  background: #9040d3 url(assets/purplelace2.jpg);
  }

  .blue-snow {
  background: #483db8 url(assets/snowback.jpg);
  }

  .silver-glass {
  background: #c0c0c0 url(assets/silver10.jpg);
  }

  .golden-moons {
  background: #b22222 url(assets/moonstar10.jpg);
  }

  .tangerine-glass {
  background: #fa5000 url(assets/goldlace3.jpg);
  }

  .orchid-canvas {
  background: #ba55d3 url(assets/textures.jpg);
  }

  .cornflower-canvas {
  background: #f0f8ff url(assets/textureu.jpg)
  }

  .black {background: #000;}

  .bb5 {border: 5px inset #483db8;}
  .bp5 {border: 5px inset #9040d3;}
  .bs5 {border: 5px inset #c0c0c0;}

  .m2 {margin: 2em;}
  .mr1 {margin-right: 1em;}
  .mb2 {margin-bottom: 2em;}

  .l {float: left; clear: left;}
  .r {float: right; clear: right;}

  .cp {color: #9040d3;}
  .cb {color: #483db8;}

  div.p1c {padding: 1em; text-align: center;}