how to change the color of the hr tag in html

1<style>       
2    hr{
3        height: 1px;
4        background-color: #ccc;
5        border: none;
6    }
7</style>
8

1<style>
2/* Red border */
3hr.new1 {
4  border-top: 1px solid red;
5}
6
7/* Dashed red border */
8hr.new2 {
9  border-top: 1px dashed red;
10}
11
12/* Dotted red border */
13hr.new3 {
14  border-top: 1px dotted red;
15}
16
17/* Thick red border */
18hr.new4 {
19  border: 1px solid red;
20}
21
22/* Large rounded green border */
23hr.new5 {
24  border: 10px solid green;
25  border-radius: 5px;
26}
27</style>
28 
29<h2>Style HR</h2>
30<p>Default:</p>
31<hr>
32<p>Different styles of HR:</p>
33<hr class="new1">
34<hr class="new2">
35<hr class="new3">
36<hr class="new4">
37<hr class="new5">
38

1border: 1px solid red;