Creating rounded corners using CSS [closed]

Answer 1

Here's an HTML/js/css solution that I did recently. There's a 1px rounding error with absolute positioning in IE so you want the container to be an even number of pixels wide, but it's pretty clean.

HTML:

Content

jQuery:

$("div.s")
.wrapInner("
")
.prepend('
');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

Image is just 18px wide and has all 4 corners packed together. Looks like a circle.

Note: you don't need the second inner wrapper, but I like to use margin on the inner wrapper so that margins on paragraphs and headings still maintain margin collapse. You can also skip the jquery and just put the inner wrapper in the html.