<hr> Tag Examples
Examples of the hr
tag in HTML 5
<hr/> tag styles
<p>The plain old horizontal rule below separates this paragraph</p>
<hr/>
<p>... from this paragraph.</p>
<h5>Here are some different styles of horizontal lines</h5>
<p>A blue horizontal line with outset border:</p>
<hr style="height: 15px; border: 5px outset #999999; background-color: #0000ff"/>
<p>An animated red horizontal line:</p>
<div>
<style scoped="scoped">
@-webkit-keyframes animated-width {
from {
width: 100%;
}
to {
width: 5%;
}
}
hr.animated-width {
height: 6px;
border: 0;
text-align: center;
background-color: #ff0000;
-webkit-animation-name: animated-width;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 1.0s;
-webkit-animation-timing-function: ease-out;
}
</style>
<hr class="animated-width"/>
</div>
<p>A horizontal line with inset border and animated green gradient:</p>
<div>
<style scoped="scoped">
@-webkit-keyframes animated-gradient {
from {
background: -webkit-gradient(linear, left top, right bottom, from(#00ff00), to(#003300));
}
to {
background: -webkit-gradient(linear, left top, right bottom, from(#003300), to(#00ff00));
}
}
hr.animated-gradient {
height: 28px;
border: 7px inset #999999;
text-align: center;
background-color: #009900;
background: -moz-linear-gradient(left top, #00ff00, #003300);
background: -webkit-gradient(linear, left top, right bottom, from(#00ff00), to(#003300));
-webkit-animation-name: animated-gradient;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 1.0s;
-webkit-animation-timing-function: ease-in-out;
}
</style>
<hr class="animated-gradient"/>
</div>