magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Inner Border


A lightweight solution to display custom, colorful and live borders over almost any element.

Some features:

- Custom colors, margins, opacity and size for borders.
- Static or fade-in/out effect on mouse over/out.
- Individual time factors for both fade-in and fade-out effects.
- Multi-instance and multiple elements configuration that share the same settings.
- Mouse and/or keyboard support to properly "highlight" the element with the border.
- Maximum backward and cross-browser compatibility.
- Lightweight, no extra dependencies and no jQuery required.


...and more!


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* New in version 1.2

- Breakpoint to change border parameters.
- Fixed an angle misplacing when using big values for radius.
- Minor code tweaks.

* New in version 1.1

- Added support for dynamically hidden/visible elements (previous versions work only with visible elements).
- Improved code (better performance with smaller code).

* New in version 1.0.2

- Added support for 'body' and 'browser' as virtual elements.
- Improved support for forms.
- Improved support for elements with dynamic content and/or that change their size programmatically.

* New in version 1.0.1

- Added transparent/opaque color mode to borders (besides the custom global opacity levels).
- Optionally, preserves angled corners on mixed borders with different colors and transparent/opaque modes.
- Fixed an inconsistency in bottom border color set.


How to use?

1. Design your page as you usually do (with images, layers, etc).
2. Drag and drop this extension and enter the element names that you want to add inner borders.
3. If you need specific border settings for different elements, repeat the step #2.
4. Setup the additional properties and behavior you want.
5. Preview or publish.

Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with