hate to give away all my secrets, but here is a cheater file I use for corners; hopefully the html will not get stripped
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Stu Nicholls | CSSplay | Krazy Korners</title> <meta name="Author" content="Stu Nicholls" /> <meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML, w3c, opacity, box model, mozilla, opera, netscape, internet explorer, techniques, layout, three column, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations, photo, photograph, gallery, slide, slideshow, picture, dropdown, pull up, fly out" /> <meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" /> <style type="text/css"> #krazy_container {display:block; position:relative; background:#ddd; padding:50px 0;} #krazy_container h2 {margin-bottom:1em;} #krazy_container h3 {clear:both; margin-top:4em;} /* Inset 3D Raised */ .raised {background: transparent; width:40%; margin:0 auto;} .raised h1, .raised p {margin:0 10px;} .raised h1 {font-size:2em; color:#fff; letter-spacing:1px;} .raised p {padding-bottom:0.5em;} .raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;} .raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;} .raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;} .raised .b2 {background:#ccc; border-left:1px solid #fff; border-right: 1px solid #eee;} .raised .b3 {background:#ccc; border-left:1px solid #fff; border-right: 1px solid #ddd;} .raised .b4 {background:#ccc; border-left:1px solid #fff; border-right: 1px solid #aaa;} .raised .b4b {background:#ccc; border-left:1px solid #eee; border- right:1px solid #999;} .raised .b3b {background:#ccc; border-left:1px solid #ddd; border- right:1px solid #999;} .raised .b2b {background:#ccc; border-left:1px solid #aaa; border- right:1px solid #999;} .raised .b1 {margin:0 5px; background:#fff;} .raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;} .raised .b3, .raised .b3b {margin:0 2px;} .raised .b4, .raised .b4b {height:2px; margin:0 1px;} .raised .b1b {margin:0 5px; background:#999;} .raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;} /* Inset 3D Curved */ .inset {background: transparent; width:40%; margin:0 auto;} .inset h1, .inset p {margin:0 10px;} .inset h1 {font-size:2em; color:#fff; letter-spacing:1px;} .inset p {padding-bottom:0.5em;} .inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;} .inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;} .inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;} .inset .b2 {background:#ccc; border-left:1px solid #ccc; border-right: 1px solid #aaa;} .inset .b3 {background:#ccc; border-left:1px solid #ccc; border-right: 1px solid #ddd;} .inset .b4 {background:#ccc; border-left:1px solid #ccc; border-right: 1px solid #eee;} .inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right: 1px solid #fff;} .inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right: 1px solid #fff;} .inset .b2b {background:#ccc; border-left:1px solid #eee; border-right: 1px solid #fff;} .inset .b1 {margin:0 5px; background:#999;} .inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;} .inset .b3, .inset .b3b {margin:0 2px;} .inset .b4, .inset .b4b {height:2px; margin:0 1px;} .inset .b1b {margin:0 5px; background:#fff;} .inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;} /* Chamfer Borders*/ .chamfer {background: transparent; width:40%; margin:0 auto;} .chamfer h1, .chamfer p {margin:0 10px;} .chamfer h1 {font-size:2em; color:#000; letter-spacing:1px;} .chamfer p {padding-bottom:0.5em;} .chamfer .top, .chamfer .bottom {display:block; background:transparent; font-size:1px;} .chamfer .b1, .chamfer .b2, .chamfer .b3, .chamfer .b4, .chamfer .b5 {display:block; overflow:hidden; height:1px; background:#eca; border- left:1px solid #000; border-right:1px solid #000;} .chamfer .b1 {margin:0 5px; background:#000;} .chamfer .b2 {margin:0 4px;} .chamfer .b3 {margin:0 3px;} .chamfer .b4 {margin:0 2px;} .chamfer .b5 {margin:0 1px;} .chamfer .boxcontent {display:block; background:#eca; border-left:1px solid #000; border-right:1px solid #000;} /* Square cutout Borders*/ .square {background: transparent; width:40%; margin:0 auto;} .square h1, .square p {margin:0 10px;} .square h1 {font-size:2em; color:#00c; letter-spacing:1px;} .square p {padding-bottom:0.5em;} .square .top, .square .bottom {display:block; background:transparent; font-size:1px;} .square .b1t {margin:0 6px; display:block; overflow:hidden; height: 5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-top:1px solid #00c;} .square .b2 {display:block; height:1px; margin:0; background:#9ce; border-left:7px solid #00c; border-right:7px solid #00c; overflow:hidden;} .square .b1b {margin:0 6px; display:block; overflow:hidden; height: 5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-bottom:1px solid #00c;} .square .boxcontent {display:block; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c;} /* Curved cutout Borders*/ .curved {background: transparent; width:40%; margin:0 auto;} .curved h1, .curved p {margin:0 10px;} .curved h1 {font-size:2em; color:#fff; letter-spacing:1px;} .curved p {padding-bottom:0.5em;} .curved .top, .curved .bottom {display:block; background:transparent; font-size:1px;} .curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px;} .curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left: 1px solid #fff; border-right:1px solid #fff;} .curved .b1 {margin:0 4px; background:#fff;} .curved .b2 {margin:0 4px; height:2px;} .curved .b3 {margin:0 3px;} .curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;} .curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;} /* flared serif */ .serif {background: transparent; width:40%; margin:0 auto;} .serif h1, .serif p {margin:0 10px;} .serif h1 {font-size:2em; color:#fff; letter-spacing:1px;} .serif p {padding-bottom:0.5em;} .serif .top, .serif .bottom {display:block; background:transparent; font-size:1px;} .serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden;} .serif .b1, .serif .b2, .serif .b3 {height:1px;} .serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;} .serif .b4 {background:#fc0; border-left:1px solid #fff; border-right: 1px solid #fff;} .serif .b1 {margin:0; background:#fff;} .serif .b2 {margin:0 1px; border-width:0 2px;} .serif .b3 {margin:0 3px;} .serif .b4 {height:2px; margin:0 4px;} .serif .boxcontent {display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;} /* Pillar type */ .pillar {background: transparent; width:40%; margin:0 auto;} .pillar h1, .pillar p {margin:0 10px;} .pillar h1 {font-size:2em; color:#fff; letter-spacing:1px;} .pillar p {padding-bottom:0.5em;} .pillar .top, .pillar .bottom {display:block; background:transparent; font-size:1px;} .pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden;} .pillar .b1, .pillar .b2, .pillar .b4 {height:1px;} .pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;} .pillar .b4 {background:#d66; border-left:4px solid #fff; border-right: 4px solid #fff;} .pillar .b1 {margin:0 2px; background:#fff;} .pillar .b2 {margin:0 1px; border-width:0 1px;} .pillar .b3 {height:2px; margin:0;} .pillar .b4 {margin:0 2px;} .pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;} /* Barrel cutout Borders*/ .barrel {background: transparent; width:40%; margin:0 auto;} .barrel h1, .barrel p {margin:0 10px;} .barrel h1 {font-size:2em; color:#fff; letter-spacing:1px;} .barrel p {padding-bottom:0.5em;} .barrel .top, .barrel .bottom {display:block; background:transparent; font-size:1px;} .barrel .b1, .barrel .b2, .barrel .b3, .barrel .b4, .barrel .b5 {display:block; overflow:hidden; height:1px; background:#e0cea3;} .barrel .b1 {border-left:10px solid #dfd5c0; border-right:10px solid #dfd5c0;} .barrel .b2 {border-left:5px solid #dfd5c0; border-right:5px solid #dfd5c0;} .barrel .b3 {border-left:3px solid #dfd5c0; border-right:3px solid #dfd5c0;} .barrel .b4 {border-left:2px solid #dfd5c0; border-right:2px solid #dfd5c0;} .barrel .b5 {border-left:1px solid #dfd5c0; border-right:1px solid #dfd5c0;} .barrel .b1 {margin:0 33%;} .barrel .b2 {margin:0 20%;} .barrel .b3 {margin:0 12%;} .barrel .b4 {margin:0 5%;} .barrel .b5 {margin:0 1px;} .barrel .boxcontent {display:block; background:#e0cea3; border-left: 1px solid #fff; border-right:1px solid #999;} </style> </head> <body> <div id="wrapper"> <div id="info"> <h2>Krazy Korners</h2> <div id="krazy_container"> <div class="raised"> <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></ b><b class="b4"></b></b> <div class="boxcontent"> <h1>3D Raised</h1> <p>Rounded corners with raised borders</p> </div> <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b> </div> <p></p> <div class="inset"> <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></ b><b class="b4"></b></b> <div class="boxcontent"> <h1>3D Inset</h1> <p>Rounded corners with inset borders</p> </div> <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b> </div> <p></p> <div class="chamfer"> <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></ b><b class="b4"></b><b class="b5"></b></b> <div class="boxcontent"> <h1>Chamfer Border</h1> <p>A 45 degree border</p> </div> <b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></ b><b class="b2"></b><b class="b1"></b></b> </div> <p></p> <div class="square"> <b class="top"><b class="b1t"></b><b class="b2"></b></b> <div class="boxcontent"> <h1>Square cutout Border</h1> <p>A box with cutout corners</p> </div> <b class="bottom"><b class="b2"></b><b class="b1b"></b></b> </div> <p></p> <div class="curved"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></ b> <div class="boxcontent"> <h1>Curved cutout Border</h1> <p>A box with cutout corners</p> </div> <b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></ b><b class="b1"></b></b> </div> <p></p> <div class="serif"> <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></ b><b class="b4"></b></b> <div class="boxcontent"> <h1>NEW! Flared shape</h1> <p>Corners to give a serif effect.</p> </div> <b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></ b><b class="b1"></b></b> </div> <p></p> <div class="pillar"> <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></ b><b class="b2"></b><b class="b4"></b></b> <div class="boxcontent"> <h1>NEW! Pillar shape</h1> <p>Corners to give a rounded pillar effect.</p> </div> <b class="bottom"><b class="b4"></b><b class="b2"></b><b class="b3"></ b><b class="b2"></b><b class="b1"></b></b> </div> <p></p> <div class="barrel"> <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></ b><b class="b4"></b><b class="b5"></b></b> <div class="boxcontent"> <h1>Barrel shape</h1> <p>A box with top and bottom bulges.</p> </div> <b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></ b><b class="b2"></b><b class="b1"></b></b> </div> </div> </div> <!-- end of info --> <!-- end of content --> </div> <!-- end of wrapper --> </body> </html> On Mar 24, 6:51 pm, "Aaron Rouse" <[EMAIL PROTECTED]> wrote: > This is the way I have seen it done with jQuery but there are many different > approaches with jQuery > > http://www.malsup.com/jquery/corner/ > > On Mon, Mar 24, 2008 at 2:59 PM, Sam Larbi <[EMAIL PROTECTED]> wrote: > > I seem to remember reading something recently about JQuery making it very > > easy to do rounded corners. (Something to the effect of include the .js > > file and set a div to class="roundedCorners"). > > > HTH, > > Sam > > > On Thu, Mar 20, 2008 at 11:25 AM, Mark Davis <[EMAIL PROTECTED]> > > wrote: > > > > Question for the more css -savvy folks... > > > > I need some rounded corners in css. What is the best way to accomplish > > > this now? I see lots of techniques...most that were posted many moons > > > ago and > > > are probably way out-dated. I need to code for IE 5.5 and > > > newer....nothing else. Internal app only. Thanks for any suggestions. > > > > *Mark Davis* > > > > __________________________________________________ > > > *ProjecTools.com* > > > P.O. Box 786 > > > Bellville, TX 77418 > > > (713) 371 9840 x 1308 > > > cell (303) 261-7851 > > > [EMAIL PROTECTED] <[EMAIL PROTECTED]>* > > -- > Aaron Rousehttp://www.happyhacker.com/ --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the "Houston ColdFusion Users' Group" discussion list. To unsubscribe, send email to [EMAIL PROTECTED] For more options, visit http://groups.google.com/group/houcfug?hl=en -~----------~----~----~----~------~----~------~--~---
