[web] Using images as a border with CSS.

This topic is 4929 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

Recommended Posts

I'm tryint to put an image border around a DIV with CSS but can't quite figure out how. Right now I'm using a 3x3 table to create this effect, but want to switch to something more readable and less 1997. I've tried searching on google but only find stuff on putting borders around an image.

Share on other sites
If you want to do a single border along one edge of a div, you can use a technique described in A List Apart's Custom Underlines article.

Share on other sites
Thanks for the help, but so far CSS3 isn't fully supported, and the border-image property isn't supported at all.

And the other site posted only deals with underlineing, I need a full border.

I guess I'll jsut use tables.

Share on other sites
I usually recommend something like this, to minimize the extra markup:

<div class="outer"><p>Here's some content...joy</p><img src="bottom-right.gif" class="bottom"/></div>

CSS looks something like this:

div.outer{  background: url(top-left.gif) top left no-repeat;}div.outer *{  background: url(top-right.gif) top right no-repeat;  margin: 0;  padding: 0;}img.bottom{  background: url(bottom-left.gif) bottom left no-repeat;  display: block;  margin: 0;  padding: 0;  border: none;  padding-left: 100px;}

Tweaked as necessary.

The net result of this is that only 2 additional tags are required to put a border around an element. It's not perfect, and there may very well be some browsers out there that don't allow background images on images, but so far it seems to work on stuff I've tried it out on, but it's a nice and clean solution without the mess of using multiple nested tags (tables or otherwise) to do the trick.

1. 1
2. 2
3. 3
Rutin
15
4. 4
khawk
14
5. 5
frob
12

• 9
• 11
• 11
• 23
• 12
• Forum Statistics

• Total Topics
633661
• Total Posts
3013220
×