Horizontal Rules

[mhulse]

hr,
.hr {
	border: 0;
	border-top: 1px solid #999;
	height: 0;
	margin: 15px 0 20px;
	padding: 0;
	-webkit-box-sizing: content-box;
	   -moz-box-sizing: content-box;
	    -ms-box-sizing: content-box;
	     -o-box-sizing: content-box;
	        box-sizing: content-box;
}

Here, this uses rem unit and rgba:

/**
 * The `<hr>` element represents a paragraph-level thematic break. It
 * separates different topics within a section of prose, or between scenes
 * in a novel.
 *
 * @see https://gist.github.com/4277585
 * @see https://github.com/h5bp/html5-boilerplate/blob/b378ce239dfb017e32fbeacc5ab0346258b089e2/css/main.css#L42-L53
 * @see https://github.com/twitter/bootstrap/blob/070c125ceceb2a164773f51226950350445160ee/docs/assets/css/bootstrap.css#L876-L881
 * @see http://dev.w3.org/html5/spec/Overview.html#the-hr-element-0
 */

hr, .hr, .hr1, .hr2, .hr3, .hr4, .hr5, .hr6 {
    border: 0;
    background: rgba(0, 0, 0, .75);
    height: .0625rem; /* 1px */
    margin: .625rem 0;
    padding: 0;
}
    .hr1 { height: .125rem; } /* 2px */
    .hr2 { height: .25rem; } /* 4px */
    .hr3 { height: .5rem; } /* 8px */
    .hr4 { height: .625rem; } /* 10px */
    .hr5 { height: .75rem; } /* 12px */
    .hr6 { height: .875rem; } /* 14px */

... and the html:

<hr>
<div class="hr"></div>
<hr class="hr1">
<div class="hr1"></div>
<hr class="hr2">
<div class="hr2"></div>
<hr class="hr3">
<div class="hr3"></div>
<hr class="hr4">
<div class="hr4"></div>
<hr class="hr5">
<div class="hr5"></div>
<hr class="hr6">
<div class="hr6"></div>