most recent 30 from http://snippetgood.com 2010-07-29T23:46:23Z http://snippetgood.com/feeds/question/33 http://www.creativecommons.org/licenses/by-nc/2.5/rdf http://snippetgood.com/questions/33/how-do-you-make-rounded-corners-in-all-browsers binky 2009-10-03T03:05:13Z 2010-02-20T06:31:57Z

<p>CSS? JQuery? What's the best and most efficient way to make rounded corners that work in all browsers? I've tried a few and right now I'm making small divs that are positioned negatively outside of the relatively positioned parent divs. Instead of foreground images, I use sprites so the corner divs are less invasive. (ha ha I should give them shorter class names too)</p> <p>since I'm asking for a snippet - I'll leave a snippet of what I do. </p> <pre><code>&lt;div id="container"&gt; &lt;div class="corner-top-left"&gt;&lt;/div&gt;&lt;div class="corner-top-right"&gt;&lt;/div&gt; &lt;div class="corner-bottom-left"&gt;&lt;/div&gt;&lt;div class="corner-bottom-right"&gt;&lt;/div&gt; &lt;/div&gt; #container { display: block; height: 300px; position: relative; width: 500px; } .corner-top-left, .corner-top-right, .corner-bottom-left, .corner-bottom-right { background: url(corner.png) 0 0 no-repeat; display: block; height: 10px; position: absolute; width: 10px; } .corner-top-left { top: -10px; left: -10px;} .corner-top-right { background-position: x x; top: -10px; right: -10px;} .corner-bottom-left { background-position: x x; bottom: -10px; left: -10px;} .corner-bottom-right { background-position: x x; bottom: -10px; right: -10px;} </code></pre>

http://snippetgood.com/questions/33/how-do-you-make-rounded-corners-in-all-browsers/150#150 Antti Sykäri 2009-11-12T03:00:43Z 2009-11-12T03:00:43Z

<p>Check out this jQuery plugin:</p> <p><a href="http://www.malsup.com/jquery/corner/" rel="nofollow">http://www.malsup.com/jquery/corner/</a></p> <p>It uses border-radius or a vendor-specific variant of that if one is available; on IE, it does something else (but works anyway).</p>