Webpage Round Floating Images

I'm trying to figure out how the balloons on this site are coded to appear to have transparent edges: http://www.dynamicdrive.com/dynamicindex4/flyimage.htm When I try to use a rounded image it always has solid color corners as it floats around no matter how i try to manipulate the page source and css. I have tried setting the <div> and <img> background colors to transparent, and also tried to use a div rounding-corner script. I have edited the pictures in photoshop so that they have no whitespace (corner) borders around them. Nothing seems to work, and those same开发者_运维技巧 balloons on my page look like a balloon on a square white background moving around... Any ideas?

Thomas was right that I wasnt using the correct file format on the images. .GIF works. You also need to make sure you delete not only the white space on the the image layer itself in photoshop, but also delete the background, and make sure the canvas size is checked off to "relative" in the layer menu.

It's just a simple transparent png

To test, grab their image and give it a shot in your page. Sometimes, images that appear transparent thanks to the checkerboard in the background (from photoshop) actually have some leftover noise that makes them come out fuzzy. But an image appearing with square corners would seem to indicate that the save with transparency wasn't successful.

I've seen it done by creating a series of floating divs. Something like this:

[ div  ]This is my paragraph lorem
[ div   ]ipsum quod dolorat. And,
[ div       ]it wraps around the
[ div   ]image. Quite nicely. The
[ div    ]image itself get's no
layout.