Unique CSS Borders – Boring borders step aside

You are here: Home » Articles » Unique CSS Borders – Boring borders step aside

Unique CSS Borders – Boring borders step aside

CSS Borders aren’t always the most exciting part of a design. However, this article will show you that with a little creativity, you can make unique css borders that will bring your web design images to life!

By Linda Chadbourne on October 30th, 2008 in Articles |

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.

Sparrow

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.

Lime

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.

moon image Unique CSS Borders Boring borders step aside

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!

owl image Unique CSS Borders Boring borders step aside

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!

balloons

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.

books

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:

shadow image 1 Unique CSS Borders Boring borders step aside

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

armchair

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.

bottles

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.

grunge image 1 Unique CSS Borders Boring borders step aside

Here is the finished gallery example:
grunge image 2 Unique CSS Borders Boring borders step aside

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.

rounded complete Unique CSS Borders Boring borders step aside

Your next step is to slice it into three images.

Top

rounded top Unique CSS Borders Boring borders step aside

Center

rounded sides Unique CSS Borders Boring borders step aside

Bottom

rounded bottom Unique CSS Borders Boring borders step aside

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

<div class="roundtop"></div>

<div class="roundside">Place Your Image Here </div>

<div class="roundbottom"></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.
rounded corner
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!

Did you like it?

Help us spread the word!

About The Author

Linda Chadbourne

Linda Chadbourne has been a web designer since 2001. A large portion of her day also involves graphic and logo design for Cozy Penguin Web Studio which she owns and operates. Linda is also one of the co-founders of The Web Squeeze which is a Web Design and Development Help Forum. In her free time she is an avid family person, horseback rider and reader.

Comments

H said :
November 1st, 2008 at 1:14 am
beautiful author!
Brad K. said :
November 12th, 2008 at 10:24 pm
Above and Below – I would have liked to see how that looked with slightly wider bars – say, padding 8px all around.
Ali Fuat said :
November 15th, 2008 at 12:28 pm
Thanks a lot for this cool tips!
Andreas S. said :
November 16th, 2008 at 5:17 am
Thanks a lot for this article. Especially, I like the simplicity of your examples. “Shadow with Image” could of course be done in the way of “Rounded corners” and hence would be more independent of the picture’s size.
Linda Chadbourne said :
November 16th, 2008 at 11:03 am
@Andreas S. So true!
@Ali Fuat You are welcome!!
@Bard K. I think I might do a follow up with more css border ideas! I’ll include your suggestion!
Sebastian T said :
December 1st, 2008 at 11:39 am
i`m kinda new to CSS ,you`re examples are beautifull..one question thou..
can i aply the class to the image src or only to the td where the picture is
Linda Chadbourne said :
December 1st, 2008 at 12:07 pm
Hey Sebastian!
Yes apply the class to the image source such as this:

Using tables isn’t recommended for web design unless you are placed tabulated data. If you have more questions, head over to the forum and we’ll be happy to help you further.
Sebastian T said :
December 1st, 2008 at 12:28 pm
sorry ,but the link u gave me isn`t working..i also joined the forum ,maybe i`ll find there how to do it
bbrian017 said :
December 8th, 2008 at 12:49 pm
wow nice images! Some of these are very very nice…
Jack Fisher said :
January 12th, 2009 at 12:29 am
very nice css going include these for sure.
ajhyde said :
February 21st, 2009 at 1:15 pm
Great tips… I would like to see more in-depth usage of their concepts, but great overview coverage!
Moonlilly said :
February 25th, 2009 at 4:11 am
Hi Linda! Thanks for these elegant yet simple examples! Lots of ideas I wouldn’t have thought of on my own I made a site awhile back using the “polaroid” effect and I think it turned out nice http://www.dubefarms.com/ I also used the xsnazzy rounded corner method for my borders, so I suppose it could be used for a picture gallery too. The xsnazzy method can be found here: http://www.cssplay.co.uk/boxes/snazzy2.html
I think it’s a great way to make rounded corners using only code, although it takes a bit of a learning curve (for me anyway) and it doesn’t work in firefox Displays nicely in ie though (go figure!) Anyway, keep up the good work!
Winardi said :
March 2nd, 2009 at 4:20 pm
Wow..I really enjoy reading your tutorial. Very clear and straight forward. Thanks once again.
Pradeep CD said :
March 4th, 2009 at 7:44 am
good post…
for rounded corners border(last one), instead of putting bg image for class “roundside“, we can give left and right borders, as thick as it is.
it will help u loading fast..
Stephanie said :
May 16th, 2009 at 9:31 pm
Thanks for the info that helps a bunch!
Derek said :
June 18th, 2009 at 8:16 pm
I noticed for the last example “Rounded Corners”, this does not work in IE 7, works fine in Firefox 3.0.6.
Any ideas on how to get it to work?
thanks
Dave said :
July 6th, 2009 at 5:33 am
I saw a recent example of rounded corners done with a top and bottom image, then left & right CSS borders for the sides.
Not a solution for all designs but for simple examples like the one above it would work.
Linda Chadbourne said :
July 6th, 2009 at 9:43 am
@pradist cd and @Dave I will add that to CSS Borders Part III so we have it here for a reference.
Thanks for that tip!
@ Derek, I tested the rounded corners in IE7 and it works for me. Try it again and see!
Thanks for the nice comments everyone!
Diane Dennis said :
September 19th, 2009 at 2:31 pm
Hi Linda!
Thank you for your time in putting together the above information.
I do have a question, if you take questions and give answers…
Say I’ve got an image of 160×160 and I want to use the first frame. The image is titled thumbnail1.jpg.
How would I make the first frame with your CSS code:
plain {
border: 1px solid #4C3C1B;
padding: 5px;
width: 300px;
background-color: #EFEECB;.}
work with that image?
or work with the “Above and Below” with your CSS code:
.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;
}
I put the spaces in above like your example shows but the spaces aren’t showing in the preview, every line in both sets of code is lined up vertically to the left.
Thank you so much for your help! But, should I be posting this in the forums instead?
I’m going to sign up for your newsletter next.
Thank you again Linda for your time and for sharing your expertise!
Diane Dennis
Linda said :
September 19th, 2009 at 8:15 pm
Hi Diane,
We’d love to see you at the forum but I’m more than happy to help you here as well. You never know if someone else will come along with the same questions!
To apply the plain border to your picture is pretty easy.
The html code looks like this:
<img src=”thumbnail1.jpg” alt=”My Picture” width=”160″ height=”160″ class=”plain” />
The css has only one minor change and that is to the width.
.plain {
border: 1px solid #4C3C1B;
padding: 5px;
width: 160px;
background-color: #EFEECB;
}
For the second part of your question, the html will look like this:
<img src=”thumbnail1.jpg” alt=”My Picture” width=”160″ height=”160″ class=”ridge” />
The only part that changed is the class.
There isn’t any change to the css. It remains exactly the same. If you want to you can add a width to that css as well but it isn’t necessary in either example because we have given the image a width and a height of 160.
But if you wanted to make sure you had all the i’s dotted and t’s crossed you could state the width and the ridge class would look like:
.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;
width: 160px;
}
Hope that helped!
Diane Dennis said :
September 19th, 2009 at 11:46 pm
Hi Linda!
Thank you so much!
Just a heads up that I never received the email asking me to confirm before I could be “finalized” for the forums. I signed up hours ago so I thought I’d let you know.
Thank you again for the code!
Have a terrific evening and weekend!
Diane
blufindr said :
September 23rd, 2009 at 6:17 am
In CSS3, you can also do rounded corners using pure CSS. It’s not supported by all browsers, not yet, but I’ve used it on Firefox to good effect.
KevJaques said :
October 16th, 2009 at 1:46 pm
Don’t forget about combining outline with border for some great ways to style borders. Of course IE7- is a pita with anything CSS wise but it should still not deter from using outline as an additional enhancement.
Of course if wanting to keep that style across all browsers some double div workaround will be needed, however there is the argument for letting different browsers behave as they would rather than try and force the issue.
Victor said :
December 16th, 2009 at 10:12 am
Great post, remember that IE requires any “FLOAT” declaration to have a “WIDTH” as well.
Css Codes said :
December 30th, 2009 at 5:23 am
Very good thanks
Memory Brindes said :
February 16th, 2010 at 10:29 am
Thanks Linda, very usefull tips and awaiting support to CSS3 in the news browsers.
Linda Chadbourne said :
February 25th, 2010 at 3:53 pm
Oh boy! Not sure when I’ll be able to tackle that. I guess we’ll say “Stay Tuned”!
neville said :
February 25th, 2010 at 7:40 pm
it is going to be a hard one to do
Nikki said :
February 27th, 2010 at 10:43 am
Wow. These are pretty cool. I especially love the snapshot border and patterned border.
Celeste said :
March 3rd, 2010 at 10:52 am
Hi there,
Sorry, i’m confused! I really like your designs and am trying to use your ridge code and implement it into my css but no matter where I put it, it doesn’t register the .ridge
Any thoughts? Where on the css code should I put it? Thanks in advance!
c
Linda Chadbourne said :
March 12th, 2010 at 9:07 pm
Hi Celeste,
You have to apply the .ridge (css class) to the image in the html. See this example below.
Hope that helps!