Nice HR horizontal line

Posted under » CSS on 18 Nov 2019

HR need not be boring. You can add images as HR

hr.flowerline {
border: 0;
height: 55px;
background-image: url(image/flowerline.png);
background-repeat: no-repeat;
}

The image may look like this.

You may want to have something simple like a gradient.

hr.style-one {
  border: 0; 
  height: 1px; 
  background-image: linear-gradient(to right, #f0f0f0, #00b9ff, #59d941, #f0f0f0);
}

or ...

hr.style-two {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}