rounded-corners Questions - SnippetGoodmost recent 30 from http://snippetgood.com2010-07-29T23:47:13Zhttp://snippetgood.com/feeds/tag/rounded-cornershttp://www.creativecommons.org/licenses/by-nc/2.5/rdfhttp://snippetgood.com/questions/33/how-do-you-make-rounded-corners-in-all-browsersHow do you make rounded corners in all browsers? binky2009-10-03T03:05:13Z2010-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><div id="container">
<div class="corner-top-left"></div><div class="corner-top-right"></div>
<div class="corner-bottom-left"></div><div class="corner-bottom-right"></div>
</div>
#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>