Unique CSS Borders – Boring borders step aside

Lately I’ve had a lot of requests from clients for photo galleries. I decided I needed to see what css options I could come up with to keep my galleries interesting which would allow each site to look unique. Here are a few examples that I came up with.

Simply Stated

This is possibly the simplest border but one that is high on style. This one pixel solid border has 5 pixels of padding and a background color.

The CSS:

.plain {
	border: 1px solid #4C3C1B;
	padding: 5px;
	width: 300px;
	background-color: #EFEECB;
	}

Snapshot

If you wanted all of your images to look like Polaroid pictures, you could use this easy technique. By increasing the padding-bottom you get that “polaroid” look.

The CSS:

.snapshot {
	border: 1px solid #666666;
	padding: 10px 10px 60px 10px;
	}

Art Gallery

This technique gives each one of your images the appearance of being framed and placed in an art gallery.

The CSS:

.art {
	border-style: double;
	padding: 16px;
	background-color: #DCDCED;
	}

Above and Below

Place a double border above and below your photo for a cool look!

The CSS:

.ridge {
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: double;
	border-bottom-style: double;
	border-top-color: #E1A60A;
	border-bottom-color: #E1A60A;
	padding: 8px 0px;
	}

Hearts

This isn’t supported in all browsers but it’s still fun! Using the border-style: dotted; and playing with the width of the image, you can get four hearts in each corner!

The CSS:

.hearts	 {
	border: 10px dotted #29C3FF;
	margin: 0;
	padding: 0;
	}

Patterned Background

Your options using a patterned background are limitless. This example also used a 1px border around the patterned background for a little more detailing.

The CSS:

.pattern {
	padding: 11px;
	background-image: url(squares.jpg);
	border: 1px solid #E95683;
	}

Shadow with Image

This is a similar technique as the one above using a background image. Instead of using a patterned background, I made a graphic of a shadow. To use this technique you have to know the size of your photo, create a rectangle a few pixels larger than your photo. In this example the photo is 300px wide by 199 pixels in height, I’ve created a rectangle that is 319px wide by 218 px in height. Soften the edges with your graphics software and save.

Here is the shadow image:

Add this to a div as a background and you get a pretty nice effect!

The CSS:

.shadow {
	background-image: url(shadow.jpg);
	padding: 9px;
	}

Off Balance

This example has a heavier border on the right and bottom plus a background color.

The CSS:

.right {
	width: 300px;
	padding: 0px 6px 6px 0px;
	background-color: #9FB2C1;
	border-top-width: 2px;
	border-right-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 2px;
	border-style: solid;
	border-color: #082F70;
	}

Grunge

This example has a mask applied to a rectangle that I made in a graphics program.
Using the rectangle as a background image in the div creates a pretty interesting effect.

Here is the rectangle with the mask applied.

Here is the finished gallery example:

The CSS:

.grunge {
	background-image: url(laptop-graphic.jpg);
	padding: 26px 23px;
	width: 223px;
	}

Finally because this question still comes up often, I’ll show you a rounded corner border option!

Rounded Corners

There are several ways to do this example, but I will show you my favorite!

First start with a rounded corner graphic that you create in your graphics program.

Your next step is to slice it into three images.

Top

Center

Bottom

This method takes three divs. The html will look like this:

<div class=&quot;roundtop&quot;></div>

<div class=&quot;roundside&quot;>Place Your Image Here </div>

<div class=&quot;roundbottom&quot;></div>

The top and bottom div classes each have to have a width and height declared in order to see the background image.

The center div which I called “roundside” which holds the image will have “repeat-y” added.

Here is the completed result as well as css.

The CSS:

.roundtop {
	background-image: url(rounded-top.jpg);
	width: 315px;
	height: 10px;
	}
.roundside {
	background-image: url(rounded-sides.jpg);
	background-repeat: repeat-y;
	width: 315px;
	text-align: center;
}
.roundbottom {
	background-image: url(rounded-bottom.jpg);
	width: 315px;
	height: 10px;
}

Take some of these examples and expand upon them to create your own new css border design ideas!