Portable custmized <hr>

When graphic designer created new design of web application I was working on I started to play with CSS trying to create view as close as it possible to what she drew using PhotoShop. Imagine that it was not always easy. Making long story short one of problems was to create custom horizontal line. Typically people use <hr> tag. But standard <hr> does not look exactly as what was drawn.
People have written very good articles about the <hr> customization (e.g. this). Unfortunately the ways are not portable enough and making the story more complicated the web application was targeted for mobile phones where you can always have surprise from specific phone model.
So, I found the following trick that worked well. I just wrote <div> tag with &nbsp; as a body and required background image stretched wide:

<div class="customhr">&nbsp;</div> 

where customhr definition looked like:

.hr {
    margin-top:1em;
    margin-bottom:1em;
    background-image:url('/images/hr.png');
    background-repeat:repeat-x;
    height: 1px;
}

This worked well for all browsers we tried.
It means that sometimes we do not need <hr> at all. Can play its role very well.