Help with rounded corners box

[Dan0]

By searching the web, I was able to piece together html and css for a round corners box. However, the css used causes issues when floating the containing div.

Below is the html and css, and attached is the image file for the rounded corners box. If anyone could review the code and help me understand how to properly (with clean and simple css) put together a rounded corners box it would be appreciated. I'm especially interested in learning how to figure out how much margin and/or padding to use to properly position the four corners. Currently, I've been guessing/checking.

Thanks.

HTML:

<div class="profileBox">
<div class="title">
<h3>Title</h3>
</div>
<div class="content">
<p>Content</p>
</div>
</div>


CSS:

.profileBox, .profileBox .title, .profileBox .title h3, .profileBox .content {
background: #FFFFFF url(../images/rd_indigo_box.png) no-repeat 100% 100%;
}

.profileBox{
min-width: 225px;
max-width: 500px;
margin: 10px 5px;
padding: 0 10px 0 0;
}/* Bottom right */

.profileBox .title{
background-position: 100% 0;
margin: 0 -10px 0 0;
padding: 0 10px 0 0;
max-height: 4.5em;
overflow:hidden;
} /* Top right */

.profileBox .title h3{
background-position: 0 0;
float:left;
color:#FFFFFF;
margin: 0;
padding: 8px 15px 16px;
} /* Top left */

.profileBox .content{
background-position: 0 100%;
margin: 0;
padding: 5px 5px 10px 15px;
overflow: hidden;
} /* Bottom left */

[aj_nsc]

Might want to check out four rounded corners (http://www.cssplay.co.uk/boxes/four_cornered.html) at CSSplay.

I had my own solution all prepared to post, but I realized that people would yell at me for putting extra markup that is not content-relevant, and also I knew CSSplay would have a good, no extra markup, easy to understand cross browser solution.

[Dan0]

Might want to check out four rounded corners (http://www.cssplay.co.uk/boxes/four_cornered.html) at CSSplay.


Thanks for the link. Unfortunately, the example had certain limitations and so doesn't meet my needs. However, I did find another example online: Simple Rounded Corner CSS Boxes. (http://modxcms.com/about/blog/rthrash/simple-rounded-corner-css-boxes.html) The concept is simple and clear, but I need some clarification on determining margins/padding for the respective image used. If anyone has used or understands the method demonstrated in the link provided, could you help clarify how to determine the needed margins/padding? Thanks.

[kender]

Why must people insist on using image files for rounded corners?

check the link in my signature, all rounded corners not a single image used to make them

I can direct you to some basic CSS that will let you do it, or a full solution for a page similar

[Dan0]

Why must people insist on using image files for rounded corners?

check the link in my signature, all rounded corners not a single image used to make them

I can direct you to some basic CSS that will let you do it, or a full solution for a page similar

If you could direct me to page from where I can learn to create rounded corners without an image that would be great.

However, the reason I am using an image file in this particular instance is because the type of rounded corners box I want has mutliple colors and gradients. I was aware that it was possible to create rounded corners without an image, but from what I understood at this point they cannot have gradients. If I am mistaken please let me know. Thanks.

[kender]

http://www.html.it/articoli/esempi/articoli_pro/nifty2/nifty10js.html

there you go