Curved box into css?

Can this box be created u开发者_C百科sing only css, or at least 90% css with corner pieces, or would it be best to just redesign it?

.panel {
    background-color: #2B2B2B;
    -webkit-border-radius: 10px; /* CSS3 Property for webkit design engine used browser */
    -moz-border-radius: 10px; /* CSS3 Property for Mozilla */
    -o-border-radius: 10px; /* CSS3 Property for Opera */
    border-radius: 10px; /* CSS3 Property for Modern Browsers */
    padding: 25px;
}

You can simply use CSS3:

div{
    border-radius: 5px; /* 5px rounded corner on all corners */
}

If you want to use a more browser-support friendly method, you can use background images, or a method like that that Spiffy Corners provides, using small divs to recreate the effect.

Have a look at SpiffyCorners for example or google for css rounded corners

entirely with css. not exact, but very similar http://jsfiddle.net/jalbertbowdenii/EBfbZ/

It is very possible, see here

however if you decide to use corner pieces for compatability you can jsut use:

<div id="box">
<div style="clear:both;">
  <div id="topleft" style="float: left;"></div><div></div><div id="topright" style="float: right;"></div>
</div>
<div id="content"></div>
<div style="clear:both;">
  <div id="bottomleft" style="float: left;"></div><div></div><div id="bottomright" style="float: right;"></div>
</div>
</div>