Style hr - horizontal bar

Using the background-image property we can replace the horizontal bar with an image.


The margin-left: auto; and margin-right: auto; are used to center the image on the screen.

hr {
    background-image: url(hr_img.jpg);
    background-repeat: no-repeat;
    height: 32px;
    width: 329px;
    border: none;
    margin-left: auto;
    margin-right: auto;
}

Important: Microsoft Internet Explorer renders a border around the hr element that can not be removed through CSS properties.

Advertisement

No User Comments.

No User Comments, be the first one to write your comments?