Here’s how I do it. 

In the spot where I want the box to show up, I create a container div to hold the box, a div for the top row and a div for the bottom row. Between the top and bottom rows, I add my content. In the top and bottom row divs, I add the left corner image and set the inline style to read   display: none; . This makes the image invisible unless I make it visible through the stylesheet. That way, I can hide the effect from incompatible browsers by not showing them the stylesheet.

 

<div class="roundcont">
   <div class="roundtop">
	 <img src="http://hariesdesign.com/new/images/round_css_tl.jpg" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>

   <p>HariesDesign.com HariesDesign.com 

HariesDesign.com HariesDesign.com 

HariesDesign.com HariesDesign.com

HariesDesign.com HariesDesign.com 

HariesDesign.com HariesDesign.com 

HariesDesign.com HariesDesign.com

 HariesDesign.com HariesDesign.com 

HariesDesign.com HariesDesign.com HariesDesign.com</p>
  
   <div class="roundbottom">
	 <img src="http://hariesdesign.com/new/images/round_css_bl.jpg" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>
</div>	

 

The CSS sets the width and background color of the container object and the color of the text inside. The margins on interior paragraphs are set so that the text doesn’t sit right up against the edge of the box.

Then the top and bottom divs are given a background image that contains the right corner images and the left corner images from the HTML code are enabled.

 

 <style>

.roundcont {
	width: 250px;
	background-color: #0BE4F7;
	color: #000;
}

.roundcont p {
	margin: 0 10px;
}

.roundtop { 
	background: url(http://hariesdesign.com/new/images/round_css_tr.jpg) 

no-repeat top right; 
}

.roundbottom {
	background: url(http://hariesdesign.com/new/images/round_css_br.jpg) 

no-repeat top right; 
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

</style>