Christian Effenberger got the inspiration for the script from reflection.js to implement it into Corner.js.

Corner.js 1.0 allows you to add corners to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers and Internet Explorer, it'll degrade and your visitors won't notice a thing. It's 6.4KB.

Setting Up

Upload corner.js and include it into your webpage.

<script src="corner.js" type="text/javascript"></script>

Using It

To add corners just add a class="corner" and an additonal class like "iradius16" to the image.

Classes

• Initialisation class "corner"
• vary the radius by adding iradius followed by the desired radius in pixel:
  Corner radius class "iradius24" - min=0 max=100 default=0
• vary the shading by adding ishade followed by the desired opacity in percentage:
  Image shading class "ishade50" - min=0 max=100 default=0
• vary the shadow by adding ishadow followed by the desired opacity in percentage:
  Image shadow class "ishadow33" - min=0 max=100 default=0
• vary the shadow by adding inverse:
  Shadow invert class "inverse"

Download: corner.js 1.0

Demo:

 <img src="..." class ="" "corner ishade50"/ />

Corner.js

Corner 1.0, Canvas, Shadow, Images, Java, Script, Javascript, UI