Creating a border around an HTML panel with custom images

Question

I'm looking for the best way to create a custom border around an HTML panel. I have a set of images for the sides, corners etc. I need a good way to place them and stretch the sides dynamically to match the panel size. If there is a jQuery plugin to do this I would prefer using it.

UPDATE: My main target platform is IE7. So it has to work on it :(

Answer 1

You can do it like this: (Except in IE6)

HTML:

Inside the box, which must have a position of relative or higher

<div class="Border Border-N"  />
<div class="Border Border-NE" />
<div class="Border Border-E"  />
<div class="Border Border-SE" />
<div class="Border Border-S"  />
<div class="Border Border-SW" />
<div class="Border Border-W"  />
<div class="Border Border-NW" />

CSS:

.Border {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0;
    width: 20px;
    height: 20px;
    z-index: 1001;
}

.Border-N {
    top: -20px;
    left: 0;
    width: 100%;
    background-image: url('Border-Top.png');
}

.Border-NE {
    top: -20px;
    right: -20px;
    background-image: url('Border-NE.png');
}

.Border-E {
    top: 0;
    right: -20px;
    height: 100%;
    background-image: url('Border-Right.png');
}

.Border-SE {
    bottom: -20px;
    right: -20px;
    background-image: url('Border-SE.png');
}

.Border-S {
    bottom: -20px;
    left: 0;
    width: 100%;
    background-image: url('Border-Bottom.png');
}

.Border-SW {
    bottom: -20px;
    left: -20px;
    background-image: url('Border-SW.png');
}

.Border-W {
    top: 0;
    left: -20px;
    height: 100%;
    background-image: url('Border-Left.png');
}

.Border-NW {
    top: -20px;
    left: -20px;
    background-image: url('Border-NW.png');
}

Answer 2

I’m not familiar with an jQuery plugins that do this, but in HTML, it’s as boring as having a <div> for each side and corner. E.g.

<div class="top-left">
    <div class="top-right">
        <div class="top-center"></div>
    </div>
</div>
<div class="middle-left">
    <div class="middle-right">
        <div class="middle-center"></div>
    </div>
</div>
<div class="bottom-left">
    <div class="bottom-right">
        <div class="bottom-center"></div>
    </div>
</div>

Use height and padding to create space for the corner images (which you’ll probably want to do as sprites), and use background-repeat to repeat thin images for the sides (if your design supports that).

You may also need to apply font-size: 0 to the top and bottom <div>s to make the defined heights work properly in IE 6.

Answer 3

CSS3 Border Image property? - Works in everything except IE.

--EDIT--

Okay for it to work in IE - you'll need to use jQuery. This article explains how to do it. You'll be able to use the CSS3 property for all adopting browsers and use the jQuery plug-in as a fall back.

Hope this helps.