Horizontal Lines With Multiple Colors and Styles

Code Snippet Library

On this second page, we'll provide examples of and code for horizontal lines with multiple colors and/or styles applied to horizontal rule (<hr />) tags.

Horizontal Rule With Two Stripes

Horizontal Rule With Two Stripes Code

<hr style="border-top: 0.5rem solid #99cc00; border-bottom: 1rem solid #001e44; background: #001e44; margin: 1.5rem 0;" />

Horizontal Rules With Two Colors and Three Stripes

Horizontal Rule With Two Colors and Three Even Stripes

Horizontal Rule With Two Colors and Three Even Stripes Code

<hr style="border-top: 22px double #1E407C; background: #A2AAAD; margin: 1.5rem 0;" />

Horizontal Rule with Two Colors and Three Uneven Stripes

Horizontal Rule With Two Colors and Three Uneven Stripes Code

<hr style="border-top: 4px solid #1E407C; background: #A2AAAD; border-bottom: 16px solid #1E407C; height: 4px; margin: 1.5rem 0;" />

Horizontal Rule With Three Distinct Colors

Horizontal Rule With Three Colors and Even Stripes

<hr style="border-top: 8px solid #009CDE; background: #491D70; border-bottom: 8px solid #BC204B; height: 8px; margin: 1.5rem 0;" />

Horizontal Rule With Three Colors and Uneven Stripes

<hr style="border-top: 7px solid #009CDE; background: #491D70; border-bottom: 13px solid #BC204B; height: 4px; margin: 1.5rem 0;" />

Horizontal Rule With Multiple Shades of One Color

Both of these examples use one color, but uses shading and the ridge border style to achieve a multi-colored effect.

Horizontal Rule With Even Shading

Horizontal Rule With Even Shading Code

<hr style="border-top: 7px solid #3EA39E75; border-bottom: 14px ridge #3EA39E; margin: 1.5rem 0;" />

Horizontal Rule With Uneven Shading

Horizontal Rule With Uneven Shading Code

<hr style="border-top: 12px solid #3EA39E75; border-bottom: 10px ridge #3EA39E; margin: 1.5rem 0;" />