Fancy corners done the easy way, with jQuery!

Written by Joe on Tuesday, August 24, 2010

Corners used to take time styling with css and images, but not anymore

The robust features and new jQuery plugings never stop amazing me. This one has been around for a while and is one of my favorite plugins. With the jQuery corner plugin you can transform any boring div, paragraph or button into a fancy designed box with a cool border. The jQuery corner plugin is light weight and has support for most browsers. The plugin has tons of options and with a little styling you can really make any element look different from other elements on your website.

So let's get started.

First thing you will need is a copy of jQuery and a copy of the jQuery corner plugin. Once you have downloaded the files and added them to your web directory, you need to include the scripts in the <head></head> section of your web page.

<script src="/your/path/to/js/jquery.js" type="text/javascript"></script>
<script src="/your/path/to/js/corner.js" type="text/javascript"></script>

Next, we start our block of jQuery, still inside the <head></head> section and under the included scripts. This block checks to see if the document is ready and the page has loaded, similar to javascripts document.ready.

<script type = "text/javascript">
    $(document).ready(function()
    {
        //jQuery code goes here
    }

</script>

For the purpose of this demo, lets say you want to make the buttons on your form have rounded corners. Now, in the past you would have to load up photoshop and create a button. If you wanted to change the style of that button you would have to open up photoship and create an all new button, which could take some time. But with the jQuery corner plugin you can change the style of your button in minutes.

Back to the jQuery, you have your submit button style with a background color:

<input type="submit" id="submitButton" value="Submit"/>

You need to have a background color to make the button work properly.

All we need to do now is add the code in our jQuery document.ready function and we're done.

<script type = "text/javascript">
    $(document).ready(function()
    {
        $("#submitButton").corner("round");
    }
</script>

And believe it or not, that's it. There are a wide variety of different options for corners such as:

  • Round
  • Bevel
  • Notch
  • Bite
  • Cool
  • Sharp
  • Slide
  • Jut
  • Curl
  • Tear
  • Fray
  • Wicked
  • Sculpt
  • Long
  • Dog Ear
  • Dog2
  • Dog3
  • Dogfold
  • Bevelfold

You can combine corner styles, set the size, and specify which corner you want to style using top, botton, tl(top left), tr(top right), etc.. You can style your element with borders and background images(as long as you set the background color) and the jQuery corner plugin will take care of everything.

To view a complete list of options visit http://jquery.malsup.com/corner/.

Like what you’ve read?

Link back to us.
http://www.revolutionunlimited.com/news-and-articles/javascript-jquery/2010-08-24/fancy-corners-done-the-easy-way-with-jquery/

OR Join Our Mailing List

* indicates required fields

Cheaper & more effective than traditional mail

Email marketing can return $43.62 for every dollar spent.

Contact Us Today

Post A Comment