Creating an HTML Vertical Rule – Line Divider

If you’re looking for a way to add an HTML vertical rule or line divider to your web page, you have most likely discovered that this isn’t possible with HTML code. However, you can do so using an image.

In addition, you can also use an image to create a horizontal rule within your HTML code.
 

The image below, which looks like this (a tiny blue dot): is a 2 pixel by 2 pixel image. This single image can be used to create an HTML vertical or horizontal line within your web page simply by changing the HTML image code height and width attributes.

If you’d like to use the image in this example, you’re welcome to copy it.

Here’s how:

Place your mouse pointer over the little blue dot (enlarged to assist you) below. Right click, and go to ‘Save Picture As.’ A window will load and enable you to select the folder on your computer in which you’d like to save the image.

Here’s the image:

HTML Code

HTML code viewed within an HTML document:

<img src="image.gif" width="2" height="2" border="0">

Browser View

HTML coding viewed through a web browser:

HTML Code

HTML code viewed within an HTML document:

<img src="image.gif" width="5" height="50" border="0">

Browser View

HTML coding viewed through a web browser:

HTML Code

HTML code viewed within an HTML document:

<img src="image.gif" width="10" height="20" border="0">

Browser View

HTML coding viewed through a web browser:

HTML Code

HTML code viewed within an HTML document:

<img src="image.gif" width="2" height="200" border="0">

Browser View

HTML coding viewed through a web browser:

HTML Code

HTML code viewed within an HTML document:

<img src="image.gif" width="5" height="200" border="0">

Browser View

HTML coding viewed through a web browser:

HTML vertical rules provide a great way to divide your web page content areas and add a bit of color to your web page.

This concludes the HTML vertical rule line divider code.