CSS for Mail.app like name bubbles

[markfc]

I'm looking for some CSS to do mail.app like name bubbles on a php page.

The script pulls names out of database then will print each name in one of those bubbles. Any ideas where I could get something like that from?

 

[angelwatt]

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.

 

[memco]

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:

.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.