I added code to my index page and to my css file, but the rounded corner box has issues (see attched image). Can you help me renmedy this?

I added this to my index page:

<div class="roundedcornr_box_878430">
   <div class="roundedcornr_top_878430"><div></div></div>
      <div class="roundedcornr_content_878430">
         <p>Lorem ipsum dolor sit amet, consectetur 
         adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim 
         veniam, quis nostrud exercitation ullamco laboris 
         nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure dolor in reprehenderit in voluptate velit esse 
         cillum dolore eu fugiat nulla pariatur. Excepteur 
         sint occaecat cupidatat non proident, sunt in culpa 
         qui officia deserunt mollit anim id est laborum.</p>
      </div>
   <div class="roundedcornr_bottom_878430"><div></div></div>
</div>

And I added this to my css:

/* Rounded Corner Containers */
.roundedcornr_box_878430 {
	background-image: url(../images/roundedcornr_878430_tl.png); 
	background-repeat: repeat-x; 
	background-position: top left;
}
.roundedcornr_top_878430 {
	background-image: url(../images/roundedcornr_878430_tr.png); 
	background-repeat: repeat-x; 
	background-position: top right;
	
}
.roundedcornr_bottom_878430 {
	background-image: url(../images/roundedcornr_878430_bl.png); 
	background-repeat: repeat-x; 
	background-position: bottom left;	
}
.roundedcornr_bottom_878430 div {
	background-image: url(../images/roundedcornr_878430_br.png); 
	background-repeat: repeat-x; 
	background-position: bottom right;	
	
	}
.roundedcornr_content_878430 {
	background-image: url(../images/roundedcornr_878430_r.png); 
	background-repeat: repeat-x; 
	background-position: top right;
}

.roundedcornr_top_878430 div,.roundedcornr_top_878430,
.roundedcornr_bottom_878430 div, .roundedcornr_bottom_878430 {
	width: 100%;
	height: 15px;
	font-size: 1px;
}
.roundedcornr_content_878430, .roundedcornr_bottom_878430 {
	margin-top: -19px;
}
.roundedcornr_content_878430 { padding: 0 15px; }

And it looks bad, please see attached image. What do I need to correct? Any help will be appreciated.

I don't think you want the rounded corner graphics set to repeat, you only want them once, so set those to no-repeat.

You might also want something like this to get your text inside the graphic. j(padding or margin depending on your use)

.roundedcornr_content_878430 p {
    padding: 10px;