Jump to content
  • Advertisement
Sign in to follow this  
griffenjam

[web] Using images as a border with CSS.

This topic is 4850 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.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!