Framing your images using CSS

May 8, 2008 · Print This Article

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. it’s time to add a class to the image source so that we can begin.

<img src=“Live Experience URL” alt=“Live Experience” class=”live-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 “live-pic.”

.live-pic {}
With our newly created class, it’s time to fill it in with the appropriate code.

.live-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 you wish which has a border only on two sides but gives the effect of a frame.

Your choice for site templates and wordpress themes


Got something to say?

You must be logged in to post a comment.