Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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

share|improve this answer

Your Answer


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.