Fancy HR Dividers

By Timothy FosterTimothy Foster


This snippet will help you quickly generate horizontal rules that are much fancier than a single grey line. This could be used for embellishment or emphasized division.


This CSI uses the following attributes:

Attribute Allowed Values Default Value Description
type gradient, elegant, double, topthick, bottomthick, triple, fuzzy, round, left, right, pyramids, road, diamond, threediamonds, alternate, beads, boxline required value Selects what kind of divider will be displayed.
color Any text, hexadecimal, or rgb color value #AAA The main color of the dividers.
color2 to color7 Any text, hexadecimal, or rgb color value varies Defines auxiliary colors


[[include :snippets:hr |type=your desired type]]

In action

Here are the various dividers used thus far. The codes are followed by their respective divider.

[[include :snippets:hr |type=gradient]]

[[include :snippets:hr |type=elegant]]

[[include :snippets:hr |type=double]]

[[include :snippets:hr |type=topthick]]

[[include :snippets:hr |type=bottomthick]]

[[include :snippets:hr |type=triple]]

[[include :snippets:hr |type=fuzzy]]

[[include :snippets:hr |type=round]]

[[include :snippets:hr |type=left]]

[[include :snippets:hr |type=right]]

[[include :snippets:hr |type=pyramids]]

[[include :snippets:hr |type=road]]

[[include :snippets:hr |type=diamond]]

[[include :snippets:hr |type=threediamonds]]

[[include :snippets:hr |type=alternate]]

[[include :snippets:hr |type=beads]]

[[include :snippets:hr |type=boxline]]


You can customize the dividers site-wide using CSS. Each divider is encased within a div with the following classes: .hrContainer and .hrType1. Using these classes, you can add code to adjust margins or whatever else. The below code, when added to your CSS, would place margins on the left and right of the divider:

.hrContainer{    margin: 0 2em; }

Furthermore, you can change the color of all of your dividers by adding the following to your CSS:

.hrContainer .color{    border-color: COLOR !important; }

This works similarly for colors 2-7.

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

Other snippets posted by Timothy Foster

Carousel - 24 May 2015 01:18
Modal Image - 01 May 2015 17:20
Bootstrap Image Box - 19 Jul 2014 01:27
Togglecheck - 17 Dec 2013 20:27
Alternative Specific Users Only - 11 Dec 2013 18:04
Image Box - 10 Dec 2013 03:14
Toggle Tag - 19 Jul 2013 11:13
Hide Tags - 14 Feb 2013 21:35
Plurality Checker - 16 Jul 2012 03:21
Mini Chat Area - 15 May 2012 12:04
Table Alterations - 16 Feb 2012 01:45

Rate this solution

If you think this solution is useful — rate it up!

rating: +17+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License