Jump to content
  • Advertisement
Sign in to follow this  

[web] Using images as a border with CSS.

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

If you intended to correct an error in the post then please contact us.

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
Advertisement
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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!