Rounded Corners with JavaScript and CSS – No Images
Rounded corners can create nice presentational effects and are very popular in web design. They also are a bit of a pain to create because they usually require PhotoShop and the markup is not as straightforward as square corners. So I was excited to give Steffen Rusitschka’s method a try, which uses only JavaScript and CSS and is quite feature full. His ShadedBorders library looks quite nice in Firefox. However, my test did not perform as well in IE6. Strangely, once you mouse over the afflicted area, the problem corrects itself. Here are the before and after shots:
Hopefully this problem will be fixed as I am quite interested in the library. I will be sure to test future versions and in the meantime may investigate potential workarounds for the problem.
Buy Me a Beer
Tags: CSS, Design, JavaScript
Chris Tiearney said,
February 21, 2008 at 1:15 am
Hi,
I have found a similar problem as soon as I added some padding. Now I’m completely new to all of this and a real newbie at JavaScript but here is some code:
Log In
var border = RUZEE.ShadedBorder.create({ corner:10, shadow:28, border:2 });
#page, #page .sb-inner { background:#CCCCFF; }
#page .sb-shadow { background:#9999FF; }
#page .sb-border { background:#6666FF; }
#page { width:300px; height:100px; padding:10px; }
.page_font { font-family:Trebuchet MS; font-size:11px; }
<?if (isset($_GET['flag'])) echo “Wrong username or password”; ?>
Username
Password
border.render(’page’);
Looks great in Firefox but in IE7 it was a screw up. Is there a decent cross-browser library that can be used?
anthony said,
June 25, 2009 at 5:04 am
’m finding there is something odd with min-height 100% – that is used in a few sticky footer techniques. Its only been out a few days and has already wated 4 hours of my time!
http://www.minikasino.com/