Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>jquery corners by Methvin <code>http://www.methvin.com/jquery/jq-corner-demo.html</code> are ok and working fine, but... there is more beautiful alternative:</p> <pre><code>http://blue-anvil.com/jquerycurvycorners/test.html </code></pre> <p>you can use that lib to do rounded images even.</p> <p>And what is very important: - 18th July 2008 - Now works in IE6,7, safari, and all other modern browsers. Fixed centering bug.</p> <p>So, please download jQuery Curvy Corners 2.0.2 Beta 3 from:</p> <pre><code>http://code.google.com/p/jquerycurvycorners/downloads/list </code></pre> <p>and again you have to load jquery core lib first so example of your HEAD can be:</p> <pre><code>&lt;head&gt; &lt;script src="http://path.to.your.downloaded.jquery.library/jquery-1.2.6.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://path.to.your.downloaded.jquery.library/jquery.curvycorners.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ $('.myClassName').corner({ tl: { radius: 6 }, tr: { radius: 6 }, bl: { radius: 6 }, br: { radius: 6 } }); } &lt;/script&gt; &lt;/head&gt; </code></pre> <p>where: tl,tr,bl,br are top-left, top-right corners etc...</p> <p>next, your BODY area:</p> <p></p> and ? <p></p> <p>and that's it :)</p> <p>link to image about:</p> <pre><code>http://img44.imageshack.us/img44/3638/corners.jpg </code></pre> <p>... and ready to use code:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script src="http://blue-anvil.com/jquerycurvycorners/jquery-1.2.6.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://blue-anvil.com/jquerycurvycorners/jquery.curvycorners.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ $('.myClassName').corner({ tl: { radius: 12 }, tr: { radius: 12 }, bl: { radius: 12 }, br: { radius: 12 } }); }); &lt;/script&gt; &lt;style&gt; .myClassName { width:320px; height:64px; background-color:red; text-align:center; margin:auto; margin-top:30px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="myClassName"&gt;content&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>just copy, paste, enjoy :)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload