Question

I know how to generate rounded corners using images. But please have a look at the link :-

http://roundedbox.andreas-kalt.de/

The rounded corners on all four corners are all images, but my question is how are those borders in the middle done? Those green color borders that surround the whole div.

The tutorial is given but it is German :(. Also i don’t want to use Css3 like -webkit-border-radius etc as they are not yet supported in IE

Thanks in advance 🙂

Answer 1

The whole thing is done with a 4 background images
here is the css

roundbox-tr {
    margin:15px auto;
    padding:0;
    background:url("roundbox_tr.gif") no-repeat right top;
    width: 90%;
}

/* top-left corner and left side */
.roundbox-tl {
    margin:0;
    padding:0;
    background:   url("roundbox_tl.gif") no-repeat left top;
}

/* bottom-right corner and bottom side */
.roundbox-br {
    margin:0;
    padding:0;
    background:   url("roundbox_br.gif") no-repeat right bottom;
}

/* bottom-left corner */
.roundbox-bl {
    margin:0;
    padding:0;
    background:   url("roundbox_bl.gif") no-repeat left bottom;
}