This code and images work good for displaying rounded corner boxes.
I tried to duplicating this css code and re-adding it into the css file.
I added a 1 after each of these like this:
.cssbox1, .cssbox_body1, .cssbox_head1, .cssbox_head1 h2

But was unsuccessful at creating duplicate new boxes on another page.
Is there a way to duplcate this css code below to make new boxes?
thanks

/* set the image to use and establish the lower-right position */
    .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
      background: transparent url(../images/boxcorner.png) no-repeat bottom right}
    .cssbox{

    /* intended total box width - padding-right(next) */
      
      width:280px !important; /* IE Win = width - padding */
      width: 280px;
      float:left;
      
    /* the gap on the right edge of the image (not content padding) */
      padding-right:15px; /* use to position the box */
      margin:20px auto}

    /* set the top-right image */
    .cssbox_head{background-position:top right;
    /* pull the right image over on top of border */
      margin-right:-15px; 
    /* right-image-gap + right-inside padding */
      padding-right:40px}

    /* set the top-left image */
    .cssbox_head h2{
      background-position:top left;
      margin:0; /* reset main site styles*/ 
      border:0; /* ditto */
    /* padding-left = image gap + interior padding ... no padding-right */
      padding:25px 0px 15px 40px; 
      */height:auto !important;*/
      height:0%} /* IE Holly Hack */

    /* set the lower-left corner image */
    .cssbox_body{
      background-position:bottom left;
      margin-right:25px; /* interior-padding right */ 
      padding:15px 0 15px 40px} /* mirror .cssbox_head right/left */


.cssbox {
    margin-right:30px;/* increase this value to suit your requirements */
 }

Did you remember to update the HTML codes as well? O_o

Thanks for your reply. Yes I did remember.
Thanks. Any additional help will be appreciated.

It seems like it should work can we see the updated css file and the html that goes with it?

Are you creating new boxes of different sizes ?

Here is the css code I altered:

/* set the image to use and establish the lower-right position */
    .cssbox1, .cssbox_body1, .cssbox_head1, .cssbox_head1 h2{
      background: transparent url(../images/boxcorner.png) no-repeat bottom right}
    .cssbox1{

    /* intended total box width - padding-right(next) */
      
      width:280px !important; /* IE Win = width - padding */
      width: 280px;
      float:left;
      
    /* the gap on the right edge of the image (not content padding) */
      padding-right:15px; /* use to position the box */
      margin:20px auto}

    /* set the top-right image */
    .cssbox_head1{background-position:top right;
    /* pull the right image over on top of border */
      margin-right:-15px; 
    /* right-image-gap + right-inside padding */
      padding-right:40px}

    /* set the top-left image */
    .cssbox_head1 h2{
      background-position:top left;
      margin:0; /* reset main site styles*/ 
      border:0; /* ditto */
    /* padding-left = image gap + interior padding ... no padding-right */
      padding:25px 0px 15px 40px; 
      */height:auto !important;*/
      height:0%} /* IE Holly Hack */

    /* set the lower-left corner image */
    .cssbox_body1{
      background-position:bottom left;
      margin-right:25px; /* interior-padding right */ 
      padding:15px 0 15px 40px} /* mirror .cssbox_head1 right/left */


.cssbox1 {
    margin-right:30px;/* increase this value to suit your requirements */
 }

Here is the html code I altered:

 <div class="cssbox1">
      <div class="cssbox_head1">
       <h2>This is a header</h2>
      </div>
      <div class="cssbox_body1">
       <p>This is for your content.</p>
      </div>
     </div>

yes I'm creaying different sizes too.

For boxes that are the same size, there's no need to duplicate what you've already got since classes are re-usable, you can make as many as you want.

For those parts of the box that ARE the same, you don't need to duplicate, just add those classes on to the existing section so this:

.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
      background: transparent url(../images/boxcorner.png) no-repeat bottom right}

becomes this:

.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2, .cssbox1, .cssbox_body1, .cssbox_head1, .cssbox_head1 h2{
background: transparent url(../images/boxcorner.png) no-repeat bottom right}
[/code]

Only add new classes where something is going to be different, and you can still group similar boxes as above.