css box with rounded corners?

[superfly404]

I have some code for a 200 px wide box, but I'm curious if I want to round the corners, I'll need to insert an image for all 4 corners...how would I do that?

#sidebar-a {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(255, 204, 153);
}

 

[rpgfan3233]

Have you tried Google? There are literally thousands of articles on this.

Here is one of the favorites:

http://www.alistapart.com/articles/customcorners/

 

[superfly404]

thanks, i found a really cool css generator, however, here's my delima

I need my rounded box to conform to some of these standards with alignment, so basically, how can I add the code at the bottom into this code at the top?

#sidebar-a {
float: right;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-left: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);

}

------
<div id="sidebar-a">&nbsp;</div>


Here's the code I got from the CSS generator:

/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }

------

<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<p>Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
</p>
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->