1. Basically the way this works is there's a whole bunch of sets of bundled div tags that are the character blocks themselves. You want all of those to be nestled within a single cell table because the parameters of that table are what makes the lines of characters wrap around cleanly.
I suspect that when you're adding the character in, you're either adding additional table open/closes or something to that affect, but I'd be happy to take a look at whatever code you have.
2. You can technically do this by altering the second "div" attribute in the "CHARACTER" grouping to include border-radius code. However, since this floats about 3/4 the way down on the image, it may not look ideal doing that.
You can tweak the placement of that overlay by altering the margin-left and margin-top attributes (basically, if you want to move it up make it MORE negative). I made two examples (one with rounded corners where the overlay normally lives and one with it moved up to margin-top:-95px). You can see here