I have the code corect for jquery to make rounded corners.. I have tested it with just a background color, and it works fine.

However, I want to apply the corners to images. It just won't work for me!

I have created an example page where I have the image with the class, right next to a div with the same class but only has a background color.. The image won't work, but the colored 'box' will.

I have tried coding it three different ways, and it still wont work. (I don't need all three ways of coding to work.. just one will do! ;'D )

Here is my Fiddle link: http://jsfiddle.net/SunnyOz/g46Gx/

Here is the test page online: http://www.webau.net/TC/example/corner_test.htm

Here is the CSS:

* { border: 0 none; } .content { width: 900px; background-color: #fff;  margin: 0 auto; } .innertube { padding: 20px; } .imgBox, .imgBox img { width:493px; height:257px; margin:0; padding:0 } .divToHaveCorners, .divToHaveCorners img { width:493px; height:257px; margin:0; padding:0; display: block; }

Here is the HTML:

<div class="content"> <div class="innertube"> <br clear="all" /> <br clear="all" /> <img class="roundimg" src="http://webau.net/TC/example/images/motorcycle1.jpg" /> &nbsp;&nbsp;&nbsp; <div class="roundimg" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div> <br clear="all" /> <br clear="all" /> <div class="imgBox"><img src="http://webau.net/TC/example/images/motorcycle1.jpg" /></div> &nbsp;&nbsp;&nbsp; <div class="imgBox" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div> <br clear="all" /> <br clear="all" /> <img class="divToHaveCorners" src="http://webau.net/TC/example/images/motorcycle1.jpg" /> &nbsp;&nbsp;&nbsp; <div class="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div> <br clear="all" /> <br clear="all" /> </div> </div>

Here is the internal Javascript code:

$(document).ready(function(){ $(".roundimg").corner("tl 50px").corner("br 50px"); $(".imgBox").corner("15px"); $('.divToHaveCorners').corner(); });

My external JS references are:

<script type="text/javascript" src="http://webau.net/TC/example/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://webau.net/TC/example/jquery.corner.js"></script>

.

I am assuming that I have left out something really simple.. but I just can't see it. Any help will be greatly appreciated.

Thanks, SunnyOz