jQuery + CSS3 Rounded Images

Problems

Border-radius and box-shadow applied to image element. Note: the rounded corners and inset box-shadow doesn't display probably.

CSS Background-Image Trick:

Using background-image CSS trick will solve the problem (view source code to find out how).

Note: Google Chrome (Windows version) does not display inset box shadow correctly. View this demo page with Mac Chrome or Firefox.

With jQuery:


It works with any image size and inline content.


It works with or without the width and height attribute in the img tag. Note: this image also has a "left" class.

Credits

Read related article: CSS3 Rounded Image With jQuery

Thanks to Darcy Clarke for the jQuery code.