Thin Horizontal Rule <hr> with CSS

The Horizontal Rule tag <hr> has been around for a long time, and still used to visually separate elements on web pages. Here is how you can change this line to be a pencil thin 1px line.

Example:

CSS:


<style type="text/css">
<!--
hr.thin {
height: 1px;
border: 0;
color: #333;
background-color: #333;
width: 80%;
}
-->
</style>


HTML:


<hr class="thin">