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.
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="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.
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!
Similar Posts
About The Author
Want more web design and development tips?
Subscribe to The Web Squeeze by Email, or our RSS feed, and you'll have all the latest web design tips coming right to your inbox! Don't be a stranger, join our forum!
Comments
Toggle TrackbacksTrackbacks
- [BLOCKED BY STBV] Vote for this article at blogengage.com
- [BLOCKED BY STBV] Added by a PAL to FAQ PAL
- Useful Links (01/11/2008) | Apramana
- AndySowards.com :: Web Development Nerdy Daily Links For 11/04/2008 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
- grunge borders??
- CSS/HTML-Übung: 6 Wege, wie Sie Grafiken mit Rahmen versehen können « Sura 1 Artworks
November 1st, 2008 at 1:14 am
beautiful author!
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.
November 15th, 2008 at 12:28 pm
Thanks a lot for this cool tips!
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.
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!
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
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.
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
December 8th, 2008 at 12:49 pm
wow nice images! Some of these are very very nice…
January 12th, 2009 at 12:29 am
very nice css going include these for sure.
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!
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
Displays nicely in ie though (go figure!) Anyway, keep up the good work!
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
March 2nd, 2009 at 4:20 pm
Wow..I really enjoy reading your tutorial. Very clear and straight forward. Thanks once again.
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..
May 16th, 2009 at 9:31 pm
Thanks for the info that helps a bunch!
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