<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><br><div><html>On Apr 15, 2008, at 11:30 AM, Nicolas Borda wrote:</html><br class="Apple-interchange-newline"><blockquote type="cite"><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "> <br><div><div>On 15 Apr 2008, at 18:55, Richard Burford wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><blockquote type="cite"><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I think it's done with JavaScript:</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><a href="http://acko.net/blog/anti-aliased-nifty-corners">http://acko.net/blog/anti-aliased-nifty-corners</a></div> </blockquote><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><br></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><span class="Apple-style-span" style="-webkit-text-stroke-width: -1; ">The implementation on drupal.org is done using pure CSS. The idea is </span></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">that you're using those 4 extra divs as hooks to add the 4 background <span class="Apple-converted-space"> </span></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">images. You specify the position of the background images so they sit <span class="Apple-converted-space"> </span></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">in each of the 4 corners. There are so many different ways you can do <span class="Apple-converted-space"> </span></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">it and there are even sites whose sole purpose is to showcase these <span class="Apple-converted-space"> </span></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">different methods.</div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><br></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><a href="http://www.google.com/search?hl=en&q=rounded+corners+css">http://www.google.com/search?hl=en&q=rounded+corners+css</a></div></blockquote><div><br class="webkit-block-placeholder"></div>Yes you are right, I didn't check out the CSS in Firebug, sorry.</div><div><br class="webkit-block-placeholder"></div><div>I like this technique:</div><div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><font face="Helvetica" size="3" style="font: 12.0px Helvetica"><a href="http://www.albin.net/examples/roundedcorners/">http://www.albin.net/examples/roundedcorners/</a></font></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><br></div></div></div></blockquote><br></div><div>Really?!? *shudders* ;-)</div><div><br></div><div>I don't use that technique anymore. I use the wrapper div w/ background-image technique. For a fixed width div, you need 2 wrapper divs. For a fluid width div, you need 5 wrapper divs. That gets the imgs out of the html.</div><div><br></div><div> - John</div><div><br></div><div><br></div></body></html>