Cornerz v0.2 - A Canvas/VML jQuery Plugin

Jonah Fox has released a jQuery Plugin that will add those coveted curvy corners to your site with the use of Canvas/VML.

Usage:
$('.myclass').curve(options)

Options include:
* radius
* borderWidth
* background
* borderColor
* corners ("tl br tr bl"). Specify which borders to draw

Example JavaScript

$('h1').cornerz({radius:40, borderWidth: 0, corners: "tl"})

Example HTML

<h1 style='margin-top: 0px;'>Cornerz v0.2</h1>

Result

The corners are antialiased and load fast, partially do to the script only being 4K - uncompressed. There is a known issue with IE having trouble with odd height values. Jonah's workaround is to use padding-bottom:1px for elements with odd heights.

* Tested on :
- IE6 XP/Vista
- IE7 XP/Vista
- Firefox 2 Ubuntu/Windows
- Safari 3 Windows
- Opera 9 Windows/Linux

Visit the Cornerz homepage to view some demos or click here to see the source.

[...] Cornerz v0.2 - A Canvas/VML jQuery Plugin By Mark Gharibian Tested on : - IE6 XP/Vista - IE7 XP/Vista - Firefox 2 Ubuntu/Windows - Safari 3 Windows - Opera 9 Windows/Linux. Visit the Cornerz homepage to view some demos or click here to see the source. Ajaxonomy - The Study of Ajax… - http://www.ajaxonomy.com [...]

I found out that the following code will allow you to inject the namespace and the behavior into an html document without it. The doctype of the document is

var ss = document.createElement('STYLE');
document.documentElement.firstChild.appendChild(ss);
ss = document.styleSheets[document.styleSheets.length - 1];
ss.addRule('v\\:*','behavior: url(#default#VML);display:inline-block');
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.