Actually there is a way of accomplishing this with using just HTML + CSS. This came around before all this fancy browser action.
I stumbled across this years ago and thought it was nifty.
Depending on how rounded you want your corners (5px is normal, but up to 15 is cool), you'll need to use that many 'b' tags, for each corner. I know this sounds odd right now but I'll try to explain it a bit but I recommend googling it to find the tut somewhere.
I'm going to describe just the top left corner, each corner will be the same but reversed and/or inversed with height and top margin.
You start with a top-row div class that holds: both corners and a title bar. Then a div for the main content section of the box, then another row called bottom-row that holds the same thing as the top row.
Each corner has the amount of b tags as your round-ness.
Each b tab will be 1px in width, with a background color of whatever color you want the inside of the bordered box to be, has a display: block, margin and padding of 0;
Then for the top left corner you play with height and margin-top.
For my example I'm going to use a box rounded at 5.
The HTML of the top row:
HTML Code:
<div class="top-row">
<div class="left-corner">
<b class="corner1"></b>
<b class="corner2"></b>
<b class="corner3"></b>
<b class="corner4"></b>
<b class="corner5"></b>
</div>
<div class="title">Hello</div>
<div class="right-corner">
<b class="corner1"></b>
<b class="corner2"></b>
<b class="corner3"></b>
<b class="corner4"></b>
<b class="corner5"></b>
</div>
</div>
<div class="round-content">
text here
</div>
<div class="bottom-row">
<div class="left-corner">
<b class="corner1"></b>
<b class="corner2"></b>
<b class="corner3"></b>
<b class="corner4"></b>
<b class="corner5"></b>
</div>
<div class="title">Hello</div>
<div class="right-corner">
<b class="corner1"></b>
<b class="corner2"></b>
<b class="corner3"></b>
<b class="corner4"></b>
<b class="corner5"></b>
</div>
</div>
Looks weird don't it?
Ok, the CSS for the top row, left corner
Code:
.top-row, .top-row div, .top-row div b{
margin: 0;
padding: 0;
border: 0;
height: 15px; /* This height is important for each corner piece */
vertical-align: bottom;
}
.top-row div b {
background: #cdcdcd; /*Change to your main color background*/
width: 1px;
display: block;
float: left;
}
/* make the height = top-row height - top margin */
.left-corner .corner1 { margin-top: 5px; height: 10px; }
.left-corner .corner2 { margin-top: 4px; height: 11px; }
.left-corner .corner3 { margin-top: 3px; height: 12px; }
.left-corner .corner4 { margin-top: 2px; height: 13px; }
.left-corner .corner5 { margin-top: 1px; height: 14px; }
Now for the right corner it the exact same except opposite, so I'm just going to use the same code from above and put the right corner into it.
Code:
/* make the height = top-row height - top margin */
.top-row .left-corner .corner1, .top-row .right-corner .corner5
{ margin-top: 5px; height: 10px; }
.top-row .left-corner .corner2, .top-row .right-corner .corner4
{ margin-top: 4px; height: 11px; }
.top-row .left-corner .corner3, .top-row .right-corner .corner3
{ margin-top: 3px; height: 12px; }
.top-row .left-corner .corner4, .top-row .right-corner .corner2
{ margin-top: 2px; height: 13px; }
.top-row .left-corner .corner5, .top-row .right-corner .corner1
{ margin-top: 1px; height: 14px; }
The CSS for the bottom row is inversed top and bottom from the top and is as follows:
Code:
.bottom-row, .bottom-row div, .bottom-row div b {
margin: 0;
padding: 0;
border: 0;
height: 15px; /* once again height is important */
vertical-align: top;
}
/*I combined the top row css and the bottom row css below*/
.top-row div b, .bottom-row div b {
background: #cdcdcd; /*Change to your main color background*/
width: 1px;
display: block;
float:left;
}
.top-row .title , .bottom-row .title {
margin-left: 5px; /* this is the amount of b tags and the rounding you want */
margin-right: 5px;
background: #cdcdcd; /* the background color again */
/* make the height = bottom-row height - top margin */
.bottom-row .left-corner .corner1, .bottom-row .right-corner .corner5
{ margin-bottom: 5px; height: 10px; }
.bottom-row .left-corner .corner2, .bottom-row .right-corner .corner4
{ margin-bottom: 4px; height: 11px; }
.bottom-row .left-corner .corner3, .bottom-row .right-corner .corner3
{ margin-bottom: 3px; height: 12px; }
.bottom-row .left-corner .corner4, .bottom-row .right-corner .corner2
{ margin-bottom: 2px; height: 13px; }
.bottom-row .left-corner .corner5, .bottom-row .right-corner .corner1
{ margin-bottom: 1px; height: 14px; }
Like I said there's an online tut somewhere if by memory and without testing my html and css doesn't function how I my thought process says it should. lol but the concept is there.
If you're fuzzy on the concept here's a diagram:
Top left Corner b tags, each column is a separate tag.
Code:
----*
---**
--***
-****
***** <-- undefined height
I know it looks odd stretched out, but when put together properly it looks just fine. (Use your imagination)
[EDIT] Wow, making this made me feel like I've been in the industry a while...I guess my age in this field shows.