diff --git a/axis/layout.styl b/axis/layout.styl
index 9fc012f..bfabbe3 100644
--- a/axis/layout.styl
+++ b/axis/layout.styl
@@ -113,6 +113,19 @@ ratio-box(ratio = 1/1)
     height: 0
     padding-top: (1 / ratio) * 100%
 
+// Mixin: Horizontal Rule
+//
+// Clean reset for divider lines.
+//
+// ex: rule()
+// ex rule(blue)
+
+rule($color = rgba(#000, .15), $spacing = 1.5em)
+  border: 0
+  border-bottom: 1px solid $color
+  height: 0
+  padding: 0
+  margin: $spacing 0
 
 // Mixin: Table Layout
 //
diff --git a/test/fixtures/layout/rule.css b/test/fixtures/layout/rule.css
new file mode 100644
index 0000000..2035487
--- /dev/null
+++ b/test/fixtures/layout/rule.css
@@ -0,0 +1,7 @@
+hr {
+  border: 0;
+  border-bottom: 1px solid rgba(0,0,0,0.15);
+  height: 0;
+  padding: 0;
+  margin: 1.5em 0;
+}
diff --git a/test/fixtures/layout/rule.styl b/test/fixtures/layout/rule.styl
new file mode 100644
index 0000000..4c889f8
--- /dev/null
+++ b/test/fixtures/layout/rule.styl
@@ -0,0 +1,2 @@
+hr
+  rule()
diff --git a/test/test.coffee b/test/test.coffee
index 53a17f1..45b5272 100644
--- a/test/test.coffee
+++ b/test/test.coffee
@@ -164,11 +164,14 @@ describe 'layout', ->
   it 'ratio-box', (done) ->
     compile_and_match(path.join(@path, 'ratio-box.styl'), done)
 
+  it 'rule', (done) ->
+    compile_and_match(path.join(@path, 'rule.styl'), done)
+
   it 'vertical-align', (done) ->
     compile_and_match(path.join(@path, 'vertical-align.styl'), done)
 
   it 'table-layout', (done) ->
-    compile_and_match(path.join(@path, 'table-layout.styl'), done)    
+    compile_and_match(path.join(@path, 'table-layout.styl'), done)
 
 describe 'print', ->
 
diff --git a/test/visual.html b/test/visual.html
index 5237818..e6d4bcd 100644
--- a/test/visual.html
+++ b/test/visual.html
@@ -48,8 +48,9 @@
     <link rel='stylesheet' href='fixtures/layout/inline-block.css' >
     <link rel='stylesheet' href='fixtures/layout/media.css' >
     <link rel='stylesheet' href='fixtures/layout/ratio-box.css' >
+    <link rel='stylesheet' href='fixtures/layout/rule.css' >
     <link rel='stylesheet' href='fixtures/layout/vertical-align.css' >
-    <link rel='stylesheet' href='fixtures/layout/table-layout.css' >    
+    <link rel='stylesheet' href='fixtures/layout/table-layout.css' >
 
     <!-- tables -->
     <link rel='stylesheet' href='fixtures/tables/table.css' >
@@ -250,6 +251,7 @@ <h1>layout</h1>
         <iframe width="1280" height="720" src="https://www.youtube.com/embed/o0xr1JRZOb4" frameborder="0" allowfullscreen></iframe>
       </div>
 
+      <hr>
       <div class="vertical-align">
         <div class='inner-div'>vertically aligned</div>
       </div>