Coderbay Essential Resources For Web Developers & Designers
Follow Coderbay
Subscribe to RSS-feed Follow Coderbay on Google Plus

Stylish Corners With JQuery Corner Plugin

Posted on November 23, 2012

Rounded corners to a HTML element can be applied with CSS border-radius property. But this CSS property is not supported in older versions of IE (Below IE9). So you have to use images to round a element corners. Also if you want to style a element corners other than rounded, you have to do more coding to achieve the required style of element’s corner. JQuery corner plugin is the best option to apply style to HTML element’s corners.

JQuery corner plugin accept a single string parameter to apply dozens of beautiful corner styles that will even work in older versions of IE. It requires JQuery 1.3.2 or later to work.

JQuery Stylish Corners Plugin

To apply beautiful corners to a element include the JQuery and corner plugin library in your code and call the corner() function.

$('#myDiv').corner("effect corners width")

This is the generic code to call the corner plugin and explained below.

Effect

Name of the effect to apply, such as round, bevel, notch, bite, etc.
Default is round.

Corners

Specify the corner(s) to apply style. Available options are top, bottom, tr, tl, br, or bl.
By default all corners are styled.

width

Width of the effect; in the case of rounded corners this is the radius.
It must be in pixels such as 10px.

JQuery Stylish Corners Plugin


Enjoyed This Post? Share with others:

Digg this | stumble | del.icio.us | reddit.com | DZone

Leave a Reply

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