[web] Using images as a border with CSS.
Author
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.
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.
Author
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.
And the other site posted only deals with underlineing, I need a full border.
I guess I'll jsut use tables.
No need to use tables! See http://www.alistapart.com/articles/customcorners/ for a good way to do this according to the webstandards. There's a part II for that article as well at http://www.alistapart.com/articles/customcorners2/
I usually recommend something like this, to minimize the extra markup:
CSS looks something like this:
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.
<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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
