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
<hr style="border-top: 0.5rem solid #FFB81D; border-bottom: 1rem solid #BE0000; background: #BE0000; margin: 1.5rem 0;" />
Horizontal Rules With Two Colors and Three Stripes
Horizontal Rule With Two Colors and Three Even Stripes
<hr style="border-top: 22px double #BE0000; background: #708E99; margin: 1.5rem 0;" />
Horizontal Rule with Two Colors and Three Uneven Stripes
<hr style="border-top: 4px solid #BE0000; background: #708E99; border-bottom: 16px solid #BE0000; 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 #3ABFC0; background: #890000; border-bottom: 8px solid #6CC24A; height: 8px; margin: 1.5rem 0;" />
Horizontal Rule With Three Colors and Uneven Stripes
<hr style="border-top: 7px solid #3ABFC0; background: #890000; border-bottom: 13px solid #6CC24A; 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
<hr style="border-top: 7px solid #BE000075; border-bottom: 14px ridge #BE0000; margin: 1.5rem 0;" />
Horizontal Rule With Uneven Shading
<hr style="border-top: 12px solid #BE000075; border-bottom: 10px ridge #BE0000; margin: 1.5rem 0;" />
0 Comments
Add your comment