March 14th, 2019 
Nilesh Chaurasia CSS hr Style
hr Style means that, you can change the color, style and width of any Horizontal Line. Border Properties are used to Style the hr(Horizontal Line) element.
Example 1 – Styling CSS hr Tag color and Line Style
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html><html> <head> <style> .first { border-color: green; border-style: solid; } .second { border-color: red; border-style: dashed; } .third { border-color: blue; border-style: dotted; } .four { border-color: yellow; border-style: inset; } </style> </head> <body> <h3>Default Horizontal Line</h3> <hr> <h3>Horizontal Line with Different Styles:</h3> <hr class="first"> <hr class="second"> <hr class="third"> <hr class="four"> </body></html> |
The above code shows that how can you style horizontal line.
Warning: To remove all other borders, you have to use the property border: none;
Example 2 – Another example of hr Style with width CSS property.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html><html> <head> <style> .first { border: none; border-top-color: green; border-top-style: solid; border-top-width: 3px; } .second { border: none; border-top-color: red; border-top-style: dotted; border-top-width: 3px; } .third { border: none; border-top-color: blue; border-top-style: dashed; border-top-width: 3px } .four { border: none; border-top-color: hotpink; border-top-style: double; border-top-width: 3px } </style> </head> <body> <h3>Default Horizontal Line</h3> <hr> <h3>Horizontal Line with Different Styles:</h3> <hr class="first"> <hr class="second"> <hr class="third"> <hr class="four"> </body></html> |
The above code shows that how can you style horizontal line in different ways.
Posted in 
Tags: 
Hi there! Someone in my Facebook group shared this site with us so I came to give it a look. I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers! Exceptional blog and terrific design.
I like this website its a master peace ! .