how to make a dotted hr in css

1/* you can put this line in your .css Change the width, 
2border etc and colour to your liking*/
3
4hr {
5  width: 10%;
6  border: 10px dotted;
7  border-style: none none dotted;
8  color: grey
9}
10
11

1hr {
2  border:none;
3  border-top:1px dashed #f00;
4  color:#fff;
5  background-color:#fff;
6  height:1px;
7  width:50%;
8}

1/* hr {
2  border:none;
3  border-top:1px dotted #f00; 
4  color:#fff;
5  background-color:#fff;
6  height:1px;
7  width:50%;
8} */