Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

What is the best way these days to make a visually interesting border around a div using images? CSS3's border-image would perfect, but it's CSS3. I don't want to rely on that yet. Is there a CSS2-compatible way to accomplish the same thing?

My audience is mostly with-it, tech-savvy, not needing hacks for decrepit old browsers, but aren't necessarily all up on the cutting edge like CSS3 either.

As an alternative to CSS for this, I tried some experiments with 3x3 tables using the images as cell background or cell content. The main content would go in the middle cell. I couldn't get the side images to stretch or repeat properly when the content varied.

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

I think the least kludgy solution would involve nesting two divs, and applying the border and a padding to the outer div.

You may have to get creative with the application of the background, especially if it's anything more complicated than a tiling image, but it would avoid adding non-semantic tables to your markup. You should never use tables for layout.

share|improve this answer
add comment

Couldn't you just have a div underneath your content div and just put the <img> tag in there?

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.