1. Change L1 to have border-style: solid
.box b.tc b.L1,.box b.bc b.L1 { margin: 0 4px; border-style:solid; }

2. Change L1 along the top of the box to have a solid border on it’s bottom edge:
/* Top border color and size */
.box b.tc b.L1 { border-width:0 0 1px 0; border-color:#aaa; }

3. Change L1 along the bottom of the box to have a solid border on it’s top edge:
/* bottom border color and size */
.box b.bc b.L1 { border-width:1px 0 0 0; border-color:#aaa; }

Also, to make many boxes of different sizes, I removed the width on the box:
Was this: .box { margin:5px; width:300px; }
I use this: .box { margin:5px; }
And then I put this kind of [div] around each box to be displayed (not sure how your text entry handles HTML, so I’m using [braces] to instead)
[div id=position_and_width style="float:right;width:200px;"]
[rounded box prefix html]
Box content goes here
[rounded box suffix html]
[/div]

Finally: In my IE6 browser, your article text overlaps the left navigation column (!), and starts below the navigation entries (below the link to BlogRoll – Mobile Java).

And really finally: You’ll be pleased to know that you came up #2 on Google when I searched for this: Draw boxes with rounded corners using CSS

Cheers, BobM

Hmmm, you might need to remove the width attribute in div.box and resize using the div.content.