CSS for Mail.app like name bubbles

CSS offers a property border-radius that can achieve that, but is only supported by the newer browsers and not IE. The more typical way is to make use of background images. There would be at least two images here, one for the left and one for the right. There's a number of tutorials for creating rounded corners, which would apply to this situation.

 

Put the names in some sort of container (probably a span for this) and give it a class like recipient (or something descriptive) and then do:

Code:

.recipient {
border : thin solid #b7d0f7;
background : url('image.png') #e1ebfb;
}

As Angelwatt said, you'll need to create the rounded effect with an image. The border color and background in the css will make it so that you'll at least have blue boxes (without rounded corners) if images are turned off.