How to make HTML dividers

Written by foye robinson
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make HTML dividers
HTML dividers separate sections of a Web page. (Hemera Technologies/ Images)

HTML dividers separate Web pages into visible sections. The horizontal rule, or HR, tag is used to create simple or decorative horizontal lines on the Web. You can combine cascading style sheets (CSS) with HTML to customise a divider's colour, dimensions, alignment and three-dimensional effect. Although you can use dividers as frequently as you like and place them anywhere on your Web page.

Skill level:


  1. 1

    Open the HTML file you want to modify in a text editor, such as Notepad, EditPad or TextEdit.

  2. 2

    Add the "<hr />" code below the BODY tag where you want the divider to appear as follows. It creates a divider that spans the entire line:

    <hr />

  3. 3

    Add 'style="width"' to the code to allow the divider to span a specific width. The following code sets the divider to 50 per cent of the line:

    <hr style="width:50%" />

  4. 4

    Add "height" to the code to give the line a specific thickness. The following code gives the divider a height of 3 pixels:

    <hr style="width:50%;height:3px" />

  5. 5

    Include "color" in the code to give the divider a specific colour, such as red:

    <hr style="width:50%;height:3px;colour:red" />

  6. 6

    Insert a "background-colour," "color," "height" and "width" to create a divider to apply no shade (remove its three-dimensional effect) as follows:

    <hr style="height:2px;border-width:0;colour:grey;background-colour:grey" />

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.