Tutorials Jquery 9 fancy jQuery Borders Plugins

9 fancy jQuery Borders Plugins

August 06,2012 Read: 1037 Times

9 fancy jQuery Borders Plugins help you to decorate your website easily. All plugins are free and ready to use. You need to download and integrate in your application. Rounded border makes your website or web apps more attractive and presentable. You need minimal knowledge about jquery to integrate them. All of them have well documented manual so that you can easily customize them according to your requirements. Enjoy.

- Border Radius

Border Radius

CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Not all current browsers support CSS3, but it is however possible to create equivalent effects and serve it with the power of jQuery.

- Inset Border Effects

Inset Border Effects

This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image.

- Spin In

Spin In

When you add a border to an image, it can be useful to animate it. This will both draw the user's eye to it, and make it seem a little fancier. The best way, I've found, to do this is to animate in one border at a time so it appears to 'spin' in clockwise

- Animated Border

Animated Border

Animated borders for any block level element. This plugin creates an animated border with configurable thickness and color.

- jQuery Border Layout

jQuery Border Layout

Features:

border layout engine, with 5 available regions, customizable using CSS, no predefined graphic so you’re not constrained into predefined structures
collapsable: every panel can be closed, and animated if desired
resizable: every panel can be resized (requires ui.draggable.js)
nesting capabilities: put layouts within layouts
multiple headers & footers: within every region
custom buttons: create a totally custom UI look
A LOT MORE: see the documentation and demos

- DD Roundies

DD Roundies

DD_roundies is a javascript library authored by Drew Diller which offers a new approach to bringing rounded corners to Internet Explorer (a browser notorious for its CSS shortcomings). DD_roundies uses IE's proprietary VML drawing language to create small images representing each corner of an element to be rounded.

- jQuery Corner

jQuery Corner

It's important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div "strips" to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item.

- Rounded Image Corner

Rounded Image Corner

Work fine in IE6, IE7, IE8, Firefox, Safari, Chrome and white background only.

- Optimised Corners

Optimised Corners

This allows jQuery users to apply all sorts of fancy effects to the corners of web page elements: the now-standard Web 2.0 rounded corners, bevels, dog-ears and many more. The plugin works by injecting extra elements into the page, and I noticed a way to achieve the same effect with fewer elements. This improves the speed and memory usage of the plugin.

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!