Styling the Horizontal Rule

The horizontal rule can be made any thickness you desire.

And its width can be specified. You can even give it a custom color. And margins.

The source code in the video is available below the video.

The Source Code in the Video

CSS rules are presented inline for this how-to post. They may be moved to a CSS style sheet.

This code creates a 3-pixel thick blue horizontal rule, the first example in the video. The rule the code creates is displayed immediately below the code box.

<hr 
   style="
      border:none;
      height:3px;
      background-color:blue;
   ">

The CSS declaration border:none; removes the border the horizontal rule would otherwise have had. Specify a border when you want a border of a different color (example in a moment).

The CSS declaration height:3px; specifies the thickness of the horizontal rule.

The CSS declaration background-color:blue; specifies the color of the horizontal rule.

Here's a border example. It creates a 1-pixel gold border for the horizontal rule (the rule displayed below the code box). Note that the thickness of the horizontal rule increases by the width of the rule top and bottom.

<hr 
   style="
      border:1px solid gold;
      height:3px;
      background-color:blue;
   ">

The second code example in the video creates a red horizontal rule, 200 pixels wide, centered in the content column. (Unless otherwise coded, horizontal rules are centered by default.)

As before, the rule is displayed below the code box.

<hr 
   style="
      border:none;
      height:3px;
      background-color:red;
      width:200px;
   ">

The CSS declaration background-color:red; specifies the color of the horizontal rule.

The CSS declaration width:200px; specifies the width of the horizontal rule.

The third and last code example in the video creates a green horizontal rule, 9 pixels thick, and aligned left in the content column. The example is displayed immediately below the code box.

<hr 
   style="
      border:none;
      height:9px;
      background-color:green;
      width:200px;
      margin:0 auto 0 0;
   ">

The CSS declaration height:9px; specifies the thickness of the horizontal rule.

The CSS declaration background-color:green; specifies the color of the horizontal rule.

The CSS declaration margin:0 auto 0 0; specifies the margins. The first 0 value specifies the top margin. The auto value specifies the right margin. And the last two 0 values specify the bottom and left values, respectively.

The right margin is the only margin specified with the auto value. Thus, the right margin pushes the horizontal as far as possible away from the right edge. The effect is a left-aligned horizontal rule.

Will Bontrager