Path = Home > Using CSS > Using CSS - The HR Tag

Using CSS - The HR Tag

To make a horizontal line across your web page you can use the HR tag.

Here is an example using normal HTML.

The basic code is :-

<hr>

and this will give you a single horizontal line in the color of your current text (note that there is no closing tag).

Using CSS you can modify the basic hr tag to make it more versatile.

The basic CSS code is

hr {
}

Though of course to use it in this basic form would be pointless since you have not gained anything by doing this

However, you can make the horizontal line more interesting by adding color

hr {
color: #CC0000;
}

and change the thickness of the line

hr {
height: 10px;
color: #CC0000;
}

next you can change the width of the line (you can specify a width in pixels or a percentage)

in pixels the code is

hr {
height: 10px;
color: #CC0000;
width: 300px;
}

in percentage the code is

hr {
height: 10px;
color: #CC0000;
width: 70%;
}