Cornerz
Bullet Proof Corners for jQuery
The following corners were rendered by your browser. No images!
-
$('#box1').cornerz() -
$('#box2').cornerz({ radius: 30 }) -
$('#box3').cornerz({ radius: 80, corners: "tl br" }) -
$('#box4').cornerz({ radius: 50 })
Usage:
$('.myclass').cornerz(options)
options is a hash with the following parameters. Bracketed is the default
- radius (10)
- borderWidth (read from BorderTopWidth or 0)
- background ("white"). Note that this is not calculated from the HTML as it is expensive
- borderColor (read from BorderTopColor)
- corners ("tl br tr bl"). Specify which borders to draw
- fixIE (true). Attempt to fix odd(2n+1) dimensions in IE
To remove corners use $(myselector).cornerzRemove()
Features
- Antialiased
- Fast
- Support for any size radius and border width with minimal performance increase
- No excanvas is required
- Current layout is maintained
- Works with all tested positions/display/floats (
current limitation with inline) - Supports fluid layouts.
- Original div still shows through, so can easily do hover effects
- Script is only 4.0k uncompressed
- Requires jQuery 1.2.6+
- Tested on :
- IE6 XP/Vista
- IE7 XP/Vista
- Firefox 2 Ubuntu/Windows
- Safari 3 Windows/Mac
- Opera 9 Windows/Linux
- Chrome/iPhone
Notes
- See more usage examples here
Problem with some Inline elements in IE - due to incorrect reporting of width- IE's VML engine doesn't understand colors such as pink. Use the hex equivalent instead.
Get invloved
- Bugs and especially fixes are most welcome!
- Download here (verion 0.6)
- Discuss at the google group
- Contact : Jonah Fox (jonah@parkerfox.co.uk)
Version History
0.7
Switched to absolute positioning for right positioned inline elements in Firefox and Opera.
added $(myselector).cornerzRemove()
License
Cornerz is MIT Licensed