This will work fine in mozilla, and would have for some time. Also works in Safari. However other browsers I havent tested and I know for a fact it will not work in IE.
I have only tested in firefox and I have seen a couple of random bugs that have vanished on refresh. Also the pane background images could be taller I know.
There is an alternate style sheet 'Style 2'. This style sheet has transparent 'panes'. Here of course when making the transparent background you must be carefull that your images don't overlap!
After reading, erm skimming, anyway, the article "CSS Design: Creating Custom Corners & Borders Part II" on A List Apart I was inspired to go back to something I had been playing around with a few months ago. I am happy with the results. Note this is just a sort of proof of concept and is by no means complete or going to work in IE!
You may notice I have added an alternate style sheet. This sheet you might say uses png support more fully.
So lets make it with simple HTML. Basically an inner and outer div. I have used inner and outer divs for a long time to avoid stupid box module hacks. I think double your divs is far superior than hacked css ;)
<div class="pane"><div>
<h2>A Pane</h2>
<p>
Well, I would put some text and stuff inside a pane, something like this. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pede felis, consequat sit amet, congue in, ultrices id, orci. Phasellus quam lacus, mollis nec, interdum et, malesuada nec, mauris. Nulla facilisi. Ut pharetra dignissim risus. Etiam at sapien et leo porta accumsan. Praesent lacus lectus, elementum quis, lobortis vitae, egestas non, dui. Pellentesque id mi sed felis sollicitudin imperdiet. Vestibulum posuere elit non augue. Nullam pretium. Nam fermentum. Aliquam hendrerit lectus eu eros. Sed viverra cursus enim.
</p>
</div></div>
So what I'll do is make the bottom layer (.pane) contain a background image with top and left edges. The space between being filled with white, forming the centeral background colour. Its child div will be offset and use a background image with right and bottom edges. This image will however not need and px other than the edge graphics as the first layer's background already has the white background covered.
So still we have two corners. Well, the pane will have to have at least two block elements in it. These will have to be the first and last objects in the pane. The first one will be offset and contain a background image of just the top right corner. The last will be offset and contain a background of just the bottom left corner.
.pane {
position: relative;
margin: 5px 20px 20px 5px;
background: url(panetl.png) no-repeat top left;
}
.pane>div {
position: relative;
bottom: -15px;
right: -15px;
background: url(panebr.png) no-repeat bottom right;
}
.pane>div>*:first-child { /* I have used the universal selector to simplify things, now I don't have to start with a heading or end with a paragraph. I may use any block level element. */
position: relative;
top: -15px;
margin: 0px 0px -15px 0px; /* -15px bottom margin to compensate for positioning. */
padding: 15px 0px 0px 0px;
background: url(panetr.png) no-repeat top right;
}
.pane>div>*:last-child {
position: relative;
left: -15px;
margin: 0px;
padding: 0px 0px 15px 15px;
background: url(panebl.png) no-repeat bottom left;
}
So there you have it, if you can get more simple than that then by all means go for it!
I know the background is not seamless ;)