How to Create flexible Rounded corners?

Answer 1

you should be able to do this with 9 explicitly sized and floated divs. the corner divs are fixed size and have background-url for the 4 corners and the side divs are repeat-y and top bottom divs have repeat-x

Answer 2

You can use a series of spans and 4 images, one for each corner, to make a resizable rounded corner div. Like this:

div {
    background: white url(topleft.gif) top left no-repeat;
}

div span {
    display: block;
    background: url(topright.gif) top right no-repeat;
}

div span span {
    background: url(bottomright.gif) bottom right no-repeat;
}

div span span span {
    padding: 2em;
    height: 0; /* fixes a padding bug in IE */
    background: url(bottomleft.gif) bottom left no-repeat;
}

div span span > span {
    height: auto; /* sets the height back to auto for all other browsers */
}

And now for the HTML:

<div><span><span><span>Round corners!</span></span></span></div>

For an actual example and code please refer to this page for a working example and source code.

Answer 3

Well, the easiest answer is: use CSS3:

#roundedCornerDiv {
    -moz-border-radius: 1em;     /* for mozilla-based browsers */
    -webkit-border-radius: 1em;  /* for webkit-based browsers */
    border-radius: 1em;          /* theoretically for *all* browsers
                                    dependant on implementation of CSS3 */
    border: 12px solid #ccc;
}

Answer 4

You should look into The Thrashbox approach for this.