After some more work, I managed to find the final fix.
Step 1:
Backup csbbody-l.gif and csbbody-r.gif (in the “img” folder).
Step 2:
Remove the bottom (rounded corner portion) of csbbody-l.gif and csbbody-r.gif
Step 3:
Using the backups from Step 1, create new csbbottom-l.gif and csbbottom-r.gif with the bottom (rounded corner portion).
Step 4:
In style.css, change:
#content .storycontent {
background: url(img/csbbody-l.gif) no-repeat bottom left;
margin: 0 0 0 0;
padding: 5px 30px 31px 20px;
}
to
#content .storycontent {
background: url(img/csbbody-l.gif) repeat-y bottom left;
margin: 0 0 0 0;
padding: 5px 30px 31px 20px;
}
Step 5:
In style.css, change:
#content .post{
background: url(img/csbbody-r.gif) no-repeat bottom right;
font-size: 100%;
width: 100%;
color: #4F402A;
margin: 0 0 0 0;
}
to
#content .post{
background: url(img/csbbody-r.gif) repeat-y bottom right;
font-size: 100%;
width: 100%;
color: #4F402A;
margin: 0 0 0 0;
}
Step 5:
In style.css, add:
#content .bottomright{
background: url(img/csbbottom-r.gif) no-repeat bottom right;
font-size: 100%;
width: 100%;
color: #4F402A;
margin: 0 0 0 0;
}
#content .bottomleft{
background: url(img/csbbottom-l.gif) repeat-y bottom left;
margin: 0 0 0 0;
padding: 5px 30px 31px 20px;
}
(this can be added anywhere; I put it at the end of the section with all the other content styling)
Step 6:
In index.php, add the following after <!– end STORYCONTENT –>
<div class="bottomright">
<div class="bottomleft"> </div>
</div>
