Multi-colored Dashed Line Using Hr - CSS

James

February 19, 2014

Ever thought to make multi-colored borders without using images? Now we can easily create multi-colored borders using html hr tag. Here is a small tutorial to create multi-colored borders.

HTML Code

[html]

<hr />

"Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute https://valtvalacyc.com irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum."</pre>

<hr />

"Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum."</pre>

<hr />

[/html]

CSS Code

[css]
hr {
height: 5px;
border: 0;
background-image: -webkit-gradient(linear, left top, right top, from(#383838), to(#f15e5e), color-stop(50%, #383838), color-stop(50%, #f15e5e));
background-image: -webkit-linear-gradient(left, #383838, #383838 50%, #f15e5e 50%, #f15e5e);
background-image: -moz-linear-gradient(left, #383838, #383838 50%, #f15e5e 50%, #f15e5e);
background-image: -ms-linear-gradient(left, #383838, #383838 50%, #f15e5e 50%, #f15e5e);
background-image: -o-linear-gradient(left, #383838, #383838 50%, #f15e5e 50%, #f15e5e);

-webkit-background-size: 24px 100%;
-moz-background-size: 24px 100%;
background-size: 24px 100%;
}

body {
background: #fef1e6;
padding: 100px;
}
[/css]

One comment on “Multi-colored Dashed Line Using Hr - CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *

We trade to make your work effortless, Subscribe our newsletter to stay updated.

We respect your security and won’t disclose your email to anyone.
Experience remarkable WordPress
products with a new level of power,
beauty, and human-centered designs.
© Magnigenie - All Right Reserved 2023
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram