title: jquery.corner.js plugin, I can't get it to work on images
body: <p>I have the code corect for jquery to make rounded corners.. I have tested it with just a background color, and it works fine.  </p>
  
  <p>However, I want to apply the corners to images.  It just won't work for me!  </p>
  
  <p>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.</p>
  
  <p>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  )</p>
  
  <p>Here is my Fiddle link: <a href="http://jsfiddle.net/SunnyOz/g46Gx/" rel="nofollow">http://jsfiddle.net/SunnyOz/g46Gx/</a></p>
  
  <p>Here is the test page online: <a href="http://www.webau.net/TC/example/corner_test.htm" rel="nofollow">http://www.webau.net/TC/example/corner_test.htm</a></p>
  
  <p>Here is the CSS: </p>
  
  <pre><code>* {
      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; }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="content"&gt;
  
    &lt;div class="innertube"&gt;
  
      &lt;br clear="all" /&gt;
      &lt;br clear="all" /&gt;
  
      &lt;img class="roundimg" src="http://webau.net/TC/example/images/motorcycle1.jpg" /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; 
      &lt;div class="roundimg" style="width: 200px; height: 100px; background-color: #701080;"&gt;Hello World!&lt;/div&gt;
  
      &lt;br clear="all" /&gt;
      &lt;br clear="all" /&gt;
  
      &lt;div class="imgBox"&gt;&lt;img src="http://webau.net/TC/example/images/motorcycle1.jpg" /&gt;&lt;/div&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; 
      &lt;div class="imgBox" style="width: 200px; height: 100px; background-color: #701080;"&gt;Hello World!&lt;/div&gt;
  
      &lt;br clear="all" /&gt;
      &lt;br clear="all" /&gt;
  
      &lt;img class="divToHaveCorners" src="http://webau.net/TC/example/images/motorcycle1.jpg" /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; 
      &lt;div class="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;"&gt;Hello World!&lt;/div&gt;
  
      &lt;br clear="all" /&gt;
      &lt;br clear="all" /&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the internal Javascript code:</p>
  
  <pre><code>$(document).ready(function(){
       $(".roundimg").corner("tl 50px").corner("br 50px");
       $(".imgBox").corner("15px");
       $('.divToHaveCorners').corner();
  });
  </code></pre>
  
  <p>My external JS references are: </p>
  
  <pre><code>&lt;script type="text/javascript" src="http://webau.net/TC/example/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://webau.net/TC/example/jquery.corner.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>.</p>
  
  <p>I am assuming that I have left out something really simple.. but I just can't see it.
  Any help will be greatly appreciated.</p>
  
  <p>Thanks,
  SunnyOz</p>