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.
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.
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.
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 borders for any block level element. This plugin creates an animated border with configurable thickness and color.
- 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
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.
Work fine in IE6, IE7, IE8, Firefox, Safari, Chrome and white background only.
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!