Rounded Corners CSS

Glenn Glenn's Blog 0 Comments

For those of you folks wanting to add rounded corners to HTML elements i.e. DIVs then you’ll probably already know that Webkit Browsers (Safari) and Moz Browsers (Firefox) already handle this with ease like so:-

CSS:
.round { -moz-border-radius:12px; -webkit-border-radius:12px; }

Here’s a nice article explaining this in more detail: http://www.the-art-of-web.com/css/border-radius/

But as usual Internet Explorer lets us down with no support for this. We’ve used a whole range of options to get rounded corners in IE and the trouble is that without cobbling together corners with images, divs and spans there are often cross IE issues. What works in IE8 for example often doesn’t work in say IE6.

As you’ll know we like jQuery here and so a nice way to achieve this with this scripting library is jQuery Corners. We have found this to work well, but note there are current glitches in IE8 and also issues with Div backgrounds.

Other than this a useful JavaScript library for creating rounded corners without images is Curvy Corners. We’re not going to go into much detail here as you can head over to their own web site for more info. However what we are going to share with you is an issue that has caused frustration with this method and that is that curvycorners.js calls elements on page wether they are present or not. If you are using a decent browser, such as Safari or Firefox, then you’ll be thinking so what? Well if you are using IE then you’ll get a nasty error such as:-

No object with ID #your div/element Call curvyCorners(settings, obj) when it is created

To relieve the issue add the following Javascript to the page calling the script:-

var curvyCornersVerbose = false;

This should resolve your Curvy Corner Woes.

Good luck with your corners – let us know if you find any bullet-proof methods!

About the Author
Rounded Corners CSS Rounded Corners CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *