Super Fantastic Resizable CSS Rounded Corners!

by Mark Nutter of nuttersmark.com

Here's the reason why

There are many rounded corner box solutions out there, but I found most of them to be lacking in one key area: resizability over a patterned background. In order to adhere to these requirements, all four corners of the box must be independently defined, which leads to relatively large amount of slices.

Using this solution, you can resize your boxes as needed without the need to go back to photoshop for different widths on your corners. If you happen to be a rails developer, I also have a solution for integrating this solution into your app via a very handy helper method. A similar solution should be easy to implement in any other framework as well.

Here's the CSS

div#rbox{height:auto;margin:20px;float:left;}
div#rbox_holder,div#rbox_topleft, div#rbox_bottomleft, div#rbox_topright,
div#rbox_bottomright,div#rbox_middle,div#rbox_middle_news, div#rbox_middle_full {height:66px;}
div#rbox_holder { width:100%;}
div#rbox_topleft, div#rbox_bottomleft {float:left;width:60px;}
div#rbox_topleft { background:url('/images/examples/top_left_corner.gif') no-repeat 6px -6px;} /* IE6 */
html>body div#rbox_topleft { background:url('/images/examples/top_left_corner.png') no-repeat 6px -6px;}
div#rbox_bottomleft {width:60px; background:url(/images/examples/bottom_left_corner.gif) 0px -12px no-repeat;} /* IE6 */
html>body div#rbox_bottomleft {width:60px; background:url(/images/examples/bottom_left_corner.png) 0px -12px no-repeat;}
div#rbox_topright, div#rbox_bottomright {float:right;width:60px;}
div#rbox_topright {background:url(../images/examples/top_right_corner.gif) no-repeat -14px -2px;} /* IE6 */
html>body div#rbox_topright {background:url(../images/examples/top_right_corner.png) no-repeat -14px -2px;}
div#rbox_bottomright {background:url(../images/examples/bottom_right_corner.gif) -14px -12px no-repeat;} /* IE6 */
html>body div#rbox_bottomright {background:url(../images/examples/bottom_right_corner.png) -14px -12px no-repeat;}
div#rbox_middle {float:left;}
div#rbox div#mainbox {background:#fff;width:648px;margin-left:-11px;padding-left:10px;}
div#rbox div#mainbox div.content {position:relative;top:-50px;}
div#rbox div#mainbox div.content p {margin:0px;} div#rbox_content {padding:0 20px 0 20px; background:transparent url('/images/examples/right_edge.gif') repeat-y;} /* IE6 */
html>body div#rbox_content {padding:0 20px 0 20px; background:transparent url('/images/examples/right_edge.png') repeat-y 665px 0px;}/* <--- relative to rbox_container */
.rbox_mainbox_container {width:700px;}
.rbox_top_connector, .rbox_bottom_connector {width:580px; background-color:#fff; } /*
.rbox_bottom_connector {width:580px; background-color:none; background: url('/images/examples/bottom_edge.gif') repeat-x 0px -12px;} /* IE6 */
html>body .rbox_bottom_connector {width:580px; background-color:none; background: url('/images/examples/bottom_edge.png') repeat-x 0px -12px;}

All widths highlighted in yellow are relative to the width highlighted in purple. They are not a proportion, but rather a displacement. For example, if you want your rounded corner box to be 500px wide instead of 700px wide, you must subtract 200px from all highlighted values you see above.

Here's the HTML

<div class='rbox_container' id='rbox'>
  <div id='rbox_holder'>
    <div id='rbox_topleft'></div>
    <div class='rbox_top_connector' id='rbox_middle'></div>
    <div id='rbox_topright'></div></div>
      <div id='mainbox'>
      <div class='content'>

        [box contents go here]

  </div></div></div>
  <div id='rbox_holder'>
    <div id='rbox_bottomleft'></div>
    <div class='rbox_bottom_connector' id='rbox_middle></div>
<div id='rbox_bottomright'></div></div></div>

Here are the images

These images comprise the makeup of the rounded corner boxes. This of course assumes you want a drop shadow this dramatic. You can use any styling you want, and as long as your slices are as big or bigger than the ones you see here, you can make them work by nudging them around in the css above.

Here are the PNGs for non-retarded browsers

Here are the GIFs for browsers with special needs

* Note: these images have transparent backgrounds *

Here's the Sample

Enter a width and watch this box magically resize!

You can drag me around, too!