Styling Images with CSS

Styling images using CSS works in exactly the same way as styling any element using the Box Model of padding, borders and margins. But if we're creative with these methods we can create some pretty cool effects.

Adding a border to an image

Adding a border to an image using CSS is simply a case of adding a border property to the <img> tag in our stylesheet, like this:

img {
	border: 2px solid black;
}

This will create a simple border, which can really add to the impact of an image, and separate it nicely from the rest of the web page content.

We can also use padding around our image to create something that looks like a picture frame:

img {
	padding: 20px;
	border: 10px solid black;
}

We can take this a step further by applying a different border style, such as a ridge border, to make the border look even more like a picture frame. By playing around with various border and padding styles, colors and thicknesses we can create almost any type of border we want.

Styling image links

By default all image links are given a blue border. This often doesn't look very attractive and can clash with our website's color scheme, but we can change it using CSS.

Applying CSS styling to image links is very much like applying styling to standard text links, but of course we need to specify that we want to affect only the image links. We can do this like so:

a img {
	border: none;
}

We can also style the four different states (link, hover, visited, active) individually. Remember that link is optional because it is the default state, so styling a img is the same as styling a img:link.

a img {
	border: 1px solid black;
}

a img:hover {
	border: 1px solid orange;
}