RoundedCornr: Rounded Corner and Gradient Generator

What it looks like:

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.

HTML code:

Replace the "Lorem ipsum..." text with your own content.

<div class="roundedcornr_box_350117">
   <div class="roundedcornr_top_350117"><div></div></div>
      <div class="roundedcornr_content_350117">
         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.
      </div>
   <div class="roundedcornr_bottom_350117"><div></div></div>
</div>

CSS code:

Add this code to your CSS stylesheet.

.roundedcornr_box_350117 {
   background: #cccccc;
}
.roundedcornr_top_350117 div {
   background: url(roundedcornr_350117_tl.png) no-repeat top left;
}
.roundedcornr_top_350117 {
   background: url(roundedcornr_350117_tr.png) no-repeat top right;
}
.roundedcornr_bottom_350117 div {
   background: url(roundedcornr_350117_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_350117 {
   background: url(roundedcornr_350117_br.png) no-repeat bottom right;
}

.roundedcornr_top_350117 div, .roundedcornr_top_350117, 
.roundedcornr_bottom_350117 div, .roundedcornr_bottom_350117 {
   width: 100%;
   height: 30px;
   font-size: 1px;
}
.roundedcornr_content_350117 { margin: 0 30px; }

Download image files:

If you put the image files in a directory different from where the HTML page resides, remember to update the filepaths in the CSS code above.