Sign in to follow this  
griffenjam

[web] Using images as a border with CSS.

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 this post


Link to post
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 this post


Link to post
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this