Horizontal lines – created using <hr> tag in HTML – are a great way of adding a line separation in your web pages. If you take a look at many websites, you will notice that they make use of horizontal lines to add to the style and feel of the website.
It is important to note that the horizontal line is quite different from font underline, so do not confuse the two.
Creating the horizontal line
Simply use the <hr> tag to create a horizontal line.
Let us begin by creating a sample html page that we are going to manipulate. You can use the code below or create your own.
Just like any HTML element, you can style horizontal line using CSS. You can change the line width, colour and other properties using CSS.
Changing the color
To add to the attractiveness of the hr line, you can change the color. To do this, you only need to add a color attribute to the CSS.
What is even more exciting is that you can change the color of specific sections of the line. Note however, that this is only true if your line has two parts.
Some examples below:
0
Changing the width/size of a horizontal line
We will now change the width and height of the lines. You would have noted already that adding a size specification to the styling of a line ( border-top: 2px solid #f00; ) changes its height, so we will move ahead to changing the width.
You should have noted in the examples above that the lines we created run the whole width of the page. This is the default behavior of the horizontal line. It is possible to limit the width. There are generally two ways you could do this. One is assigning a specific size to the line ( for example width:120px ). The other way, and one that is advised, is to assign a percentage of the width of the container. This is better practice because it will be possible for the line to adapt to changes to the container size. An example of how you can implement this is width:50%
Now let us implement both these methods to our lines. After you are done, change the width of your browser and note the behavior of the lines.
Creating a one pix beautiful horizontal line
Just apply a 1 pix border to the Horizontal line class and there you have a simple horizontal line:
0
Horizontal line in an HTML table
You can add horizontal line in HTMl table cells just like any other container. It can be used to add additional styling.
0
Horizontal line Gallery
Here is a collection of horizontal line styles.
0