Navigation

• Home
• Archives
• About
• Contribute

Search

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

Categories

Accessibility

Announcements

Cascading Style Sheets (CSS)

The Document Object Model

General interest

HTML and XHTML

JavaScript

PHP

Search engine optimization

Semantics

Training

Usability

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.

<img> 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 <img>?

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 <img> 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 <div> or <span> in sight!

Permanent link | Filed under: Cascading Style Sheets (CSS)

---

Commenting is closed for this article.