I've been following the tutorial at: http://www.webcredible.co.uk/user-frien ... ders.shtml On how to create a border with curved corners. I followed the 'final product' code exactly, but instead of getting the example they provided as 'what it should look like', I instead get the 2nd example (in the tutorial, the 2nd example is the one that shows both the corners and the straight sections not smoothly connected).
I realise this doesn't answer your question ... but 8 nested divs just for a graphical effect? That's horrible. I would give up on having rounded corners rather than use that.
First thing: is the box fixed-width, fixed-height, flex-width, flex-height?
Depending on the answer you need one or more elements to put your images on. Fixed-width and fixed-height is the simplest: you only need one element and image and one css code line. Fully flexible box would need at most 4 elements.
Second: what elements are there already? Most often, you already have 2 in place. The the element for the box (probably a div) and something in it (a p, a h2?). First use those elements to put the background images behind.
Third: is the rounded box not complete? Only then start thinking about adding another element.
.somebox {
display: relative; /* Without position relatively spans won't be at the corners of the box */
border: 1px solid COLOR_HERE;
}
.somebox .lt, .somebox .rt, .somebox .lb, .somebox .rb {
background: url(...image file with all 4 corner sprites inside...) left top no-repeat; /* Background image */
position: absolute; /* We position all corners absolute, so that they go to the corners */
display: block; /* If you will use divs, not needed ofcourse */
width: ...px; /* Width of the sprite image */
height: ...px; /* Height of the sprite image */
}
/* Position all elements and their backgrounds */
.somebox .rt { left: -1px; top: -1px; } /* -1 because we have border */
.somebox .rt { background-position: right top; right: -1px; top: -1px; }
.somebox .rb { background-position: right bottom; right: -1px; bottom: -1px; }
.somebox .lb { background-position: left bottom; left: -1px; bottom: -1px; }
}
Maybe there was something specific for IE too, don't remember and unfortunately can't check at the moment.
Note: this of course doesn't work with semi transparent gifs and transparent PNGs
Verizon or AT&T. Instead of reflexion the accommodation doomed scheme, Blizzard erizon/AT&T and Minute Filmmaker Lineage2 adena to get their raw guys (the ones who actually do the creation and not this schmo who has a even in management at refined) and get their routers to graduation conversation to themselves the most underspent way realistic.