Skip to page content

Bite Size Standards

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Recently
Supercharge your image borders
CSS values for colors
CSS selectors: the basics
Coloring text-decoration
Centering an image, Part 2
Centering an image, Part 1
Easy cross-browser transparency
Become a Bite Size Standards author
Bite Size Standards relaunches
Equal height excerpts with ems

Supercharge your image borders

Matthew Pennell | 20 May 2007

Image borders. Borders - for images. They're not very interesting, right? Sometimes we'll add a border: 1px solid #ccc; if we want our images to stand out from the surrounding text, but apart from that it's not usually an aspect of CSS that gets a great deal of attention.

I'm going to show you three ways to spruce up your image borders and add a little more visual interest to your designs - and all without any additional markup.

and the CSS box model

All of these techniques rely on what we know about the CSS box model: Total width equals the width of the content, plus internal padding, plus borders - right? But where's the internal padding on a self-closing element like ?

The answer is that applying CSS padding to an image works in exactly the same way as any other element, by creating space between the border and the content - only in this case, the content is the src of the tag. So, armed with this knowledge, what happens if we apply both borders and padding to our images?

img { border: 1px solid #666; background: #fff; padding: 10px 10px 60px; }

Voila - Polaroid-style image styling, without the need for an extra containing element! By setting the background as well as using padding, we can surround our image with space. Ideal for an image gallery or portfolio page.

Emphasize the edges of your photos

A second use for this technique is to let you add a subtle border to your photos - a good idea if your color scheme calls for a light-colored border for your images. Sometimes the sky can blend into a surrounding light color, but by setting a small amount of padding we can simulate a double border on our photo:

img { border: 15px solid #def; background: #aaa; padding: 1px; }

That's much better - the subtle 1px border prevents the photo from 'bleeding' into its border.

Lightbox slides

Finally, we've seen what happens if you set a background-color for your image - but what about using another image as the background? Well, it works just the same - specify the background-image as you would for any other element, and add enough padding for the background image to be visible:

img { background: #fff url(slide.png) no-repeat 50%; padding: 45px 20px 45px 15px; }

Here's one I prepared earlier - lightbox-style slide backgrounds (hat-tip). This technique will only work if your images are all the same size, as the width of the image plus the padding needs to add up to the width of the background-image for it to be displayed correctly. Still, it's a fun technique for displaying photo galleries or other sets of images where you already know the image dimensions.

Summary

So, there we go - three new ways to style your images, and not an extraneous

or in sight!

About the Author

Matthew Pennell works as a senior designer for one of Europe's leading hotel booking websites, writing semantic XHTML, bleeding-edge CSS and JavaScript that usually works. When he's not doing that, he can be found writing reviews and comment for Digital Web Magazine, organising his local Refresh group, or blogging at The Watchmaker Project, where he writes occasional entries and wishes more people would send him memes.

Articles by Matthew Pennell

6 Comments

| Post a comment | Comments Feed

  1. Ron SRon S�s site : http://www.betatalk.info/

    30 May 2007, 12:18 : Permanent link to comment

    Fantastic guide. Styling images has been a bit of a drag in the past for me, but now I see the visual benefits.

  2. John OxtonJohn Oxton�s site : http://johnoxton.co.uk

    31 May 2007, 06:51 : Permanent link to comment

    Nice guide Matthew :)

    Although I have to admit to an extra span for an image description I have used a similar technique for this:

    http://joshuaink2006.johnoxton.co.uk/templates/gallery/

  3. Jermayn ParkerJermayn Parker�s site : http://germworks.net

    8 June 2007, 06:08 : Permanent link to comment

    Very enlightening and challenging in the fact that you can create nice looking images without extra crap like you say.

    I am actually using the black border white padding for a client at the moment

  4. John SmithJohn Smith�s site :

    14 June 2007, 16:07 : Permanent link to comment

  5. John SmithJohn Smith�s site :

    16 June 2007, 13:14 : Permanent link to comment

  6. John SmithJohn Smith�s site :

    16 June 2007, 15:03 : Permanent link to comment


Commenting is closed for this article.

© Copyright 2006 Bite Size Standards and Authors