AwesomeBorder

The Simple Way To Make an Awesome Border in your Div Without Any Images Demo

Usage:

[1] Enable Your Awesome Border :-

to enable Awesome Border Plugin you need to insert 2 Classes [AwesomeBorder , (yourSymbol)]

Example :

<div class="AwesomeBorder ab-circle"></div>

[2] What Symboles I have ??

you have 3 Symbols you can Enable one of them by their classes :-

Symbol name	Symbol Class
Circle	ab-circle
Triangle	ab-triangle
Oblong	ab-oblong

[3] Can I Set My border size , color .. etc ??

of course ...

you have 2 choices :-

1- just insert your classes and it will work by default values

2- set you custom values

[4] How Can I set my custom values ?

you have some Attributes to set your custom values

Attribute Name	Attribute Default Value	Attribute options
data-border-position	top	you have 2 options to set you border position top , bottom
data-border-size	30	just put your size as a number NOTE this attribute mean symbol size
data-border-color	#E84C4C	just put your color by Color name , color Hex , rgb , rgba .... As you like

---

there is two Attributes specifically to oblong symbol ONLY

Attribute Name	Attribute Default Value	Attribute options
data-border-height	border-size * 1.5	just put your spacing as a number
data-border-spacing	10	just put your spacing as a number NOTE this attribute to put spacing between oblong symbols

NOTE When you Choose "oblong symbol" will follows that :

symbol size = data-border-size - data-border-spacing

so you shoulden't set "border size value" = "border spacing value"

[5] Support :

supported on all browsers and IE8,

NOTE : download CSS3 PIE and put file PIE.htc into js folder to support border-radius in IE8

you can download it from HERE.

Dependencies

jQuery Library

you can download it from HERE.

License

MIT license