Framing your images using CSS

So you have this awesome autographed picture of Carrot Top that you got after months of waiting from his fan website, and you’d like to put it up on your website to prove your fanhood. The problem is you don’t have Photoshop or Fireworks handy to put a nice frame around it, and you’d like to have something to do the job. Well don’t sweat it my friends, I’ll show you a simple yet effective CSS trick that you can use to mimic a frame on a picture and all you’ll need is Notepad to do it.

First up, we’ll need our picture. Since my autographed picture is locked away in a security vault for safekeeping, we’ll use a picture of my co-worker, Chris Crum, instead.

Umm, yeah… Moving on.

Now that we have our picture, it’s time to add a class to the image source so that we can begin.

<img src=“Chris URL” alt=“Chris Crum” class=”chris-pic”>

With that exhausting bit of prep work out of the way it’s time to move on to the magic.
What you’ll need to do now is open up your CSS file so we can add a new class. In this case it’s called “chris-pic.”

.chris-pic {}

With our newly created class, it’s time to fill it in with the appropriate code.

.chris-pic {
padding: 5px;
border-right: solid 1px #CCCCCC;
border-bottom: solid 1px #BEBEBE;
}

Before we go any further, I’d like to give a brief explanation of what the text above means.

The first line sets the padding around the picture to five pixels on all sides. The second line places a light gray border on the right side with a width of just one pixel. Finally, the third line places a slightly darker gray border on the bottom of the picture also with a width of just one pixel.

You’ll end up with something like below which has a border only on two sides but gives the effect of a frame.

That’s it! Now get out there and have some fun.

Topics: CSS, Design, Web Development