Shows some of the things corner.js does.

class = "corner"

class = "corner ishade50"

class = "corner ishadow20"

class = "corner ishade50 ishadow20"

class = "corner ishadow40 inverse"

class = "corner iradius16"

class =
"corner iradius24 ishadow33 inverse"

class =
"corner iradius20 ishadow33"

class =
"corner iradius8 ishade75 ishadow33"

class =
"corner iradius16 ishade66 ishadow30"

class =
"corner iradius32 ishade50 ishadow25"

class =
"corner iradius48 ishade33"

• Initialisation class "corners"
• vary the radius by adding iradius followed by the desired radius in pixel:
  Corner radius class "iradius24" - min=0 max=100 default=16
• vary the corners by adding iradiae followed by the desired bits as bitchain:
  Corner selection class "iradiae1010" - default=1111 [top left|top right|bottom left|bottom right]
• vary the border by adding iborder followed by the desired width in pixel:
  Corner border class "iborder2" - min=0 max=100 default=0
• vary the border color by adding icolor followed by the color as string:
  Border color class "icolor0000ff" - min=000000 max=ffffff default=0000ff

class =
"corners iradius32"

class =
"corners iradiae1010"

class =
"corners iborder1 icolorffffff"

Images used are copyrighted and are used for demonstration only.

Download corner.js and include it into your webpage.

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

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

• 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"

If you want flexibility, use "cvi_corner_lib.js" instead of "corner.js". You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).

Set defaults using Javascript

cvi_corner.defaultRadius = 0; //INT 0-100 (px)
cvi_corner.defaultShadow = 0; //INT 0-100 (% opacity)
cvi_corner.defaultShade = 0; //INT 0-100 (% opacity)
cvi_corner.defaultInverse = false; //BOOLEAN

Add images using Javascript

cvi_corner.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {radius: value, shadow: value, shade: value, inverse: value}

Example:

cvi_corner.add(document.getElementById("myimg"), { shadow: 75, shade: 0 });

Modify images using Javascript

cvi_corner.modify(image, options);
If the image has already an effect but a option value has changed, the effect will be changed accordingly.

Example:

cvi_corner.modify(document.getElementById("myimg"), { radius: 50 });

Remove effect from an image using Javascript

cvi_corner.remove(image);

Alternatively use "cvi_corners_lib.js" instead of "justcorners.js".

Set defaults using Javascript

cvi_corners.defaultXradius = 16; //INT 0-100 (px)
cvi_corners.defaultYradius = 0; //INT 0-100 (px)
cvi_corners.defaultCorners = "1111"; //STR "0000"-"1111" [top left|top right|bottom left|bottom right]
cvi_corners.defaultBorder = 0; //INT 0-100 (px borderwidth)
cvi_corners.defaultColor = "#0000ff"; //STR "#000000"-"#ffffff" bordercolor
cvi_corners.defaultOpacity = 100; //INT 0-100 (% borderopacity)


Add images using Javascript

cvi_corners.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {xradius: value, yradius: value, corners: value}

Example:

cvi_corners.add(document.getElementById("myimg"), { corners: "1010" });

Modify images using Javascript

cvi_corners.modify(image, options);
If the image has already an effect but a option value has changed, the effect will be changed accordingly.

Example:

cvi_corners.modify(document.getElementById("myimg"), { xradius: 20, yradius: 10 });

Remove effect from an image using Javascript

cvi_corners.remove(image);

• Fast and easy to implement. Just add class="corner iradius[n]" to the image and your good to go.
• Don't need to spend time in an image editor creating images with corners.
• Works really well with forum avatars. Doesn't require additional server work.
• It's dead easy to change the attributes of the corners.
• Free of charge use on non-commercial and private web sites.

In older browsers, the script degrades and your visitors won't notice a thing.

Please read the License before you download corner.js 1.7

Please read the Frequently Asked Questions before you contact the author.

Version 1.7

• Added border support for cvi_corners_lib.js and justcorners.js

• Added scriptable lib versions cvi_corner_lib.js and cvi_corners_lib.js

• Added soft shadows for Internet Explorer 6/7

• Added support for img attributes:
  id alt title src onclick
• Added Internet Explorer support for iradiae

• Added support for Internet Explorer 6/7
  (iradiae is missing and shading isn't complete)

• Added usemap support for block element surrounded images

• Added soft shadows
• Appended justcorners.js

• Initial Release

Please leave any comments at this contact formular.

Original idea is mine but the inspiration for the script came from reflection.js.

corner.js, justcorners.js and cvi_corner_lib.js, cvi_corners_lib.js are distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.