How to Create Horizontal Rules in CSS


Horizontal rules, or lines, in HTML programming are usually used as a separator to divide sections of a Web page. Using cascading style sheets (CSS), you may declare and apply various properties to the line when you use the "<hr>" tag in your pages. However, how the horizontal rules display differs depending on which browser you and visitors to your website use. Internet Explorer and Firefox each recognize some properties the other doesn't, so use both properties when necessary to make sure everybody sees your site the way you intend.

  • Open your CSS file. Type the following to create a new selector for a horizontal line:

    hr {

  • Type the following to declare color properties:

    color: red;

    background-color: red;

    You should use both because you don't know which browser visitors to your website use. Internet Explorer recognizes the "color" property for the "<hr>" tag, but not the "background-color" property. Firefox does the reverse.

  • Type the following to declare the width and height:

    height: 1px;

    width: 50%;

    You may use percentages or pixels for these properties, but using a percent for the height sometimes does not produce what you want.

  • Type the following to declare the horizontal line's alignment:

    text-align: left;

    margin: 0px auto 0px 0px;

    Similar to the color property, Internet Explorer and Firefox use different ways to align horizontal rules. If, for example, you set the "width" property to 50% and only used this "text-align" property, the line in Internet Explorer would align to the left, but in Firefox, it would align in the middle.

  • Type the following to define a border:

    border: 1px dashed;

    This puts a dashed border all the way around the horizontal rule. If you set the rule to one pixel in height, or left out the height property altogether, the line itself would become dashed. Remove the "dashed" part of this property to define a solid border.

  • Save the CSS file and upload it to your Web server.

Related Searches


Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!