This is how to create and customize horizontal lines in HTML (Hypertext Markup Language) tutorial.
Find out how to add and style the horizontal lines with the Horizontal Rule tag <hr> in the HTML page.
The <hr> element is displayed as a horizontal rule, that is used for various purposes.
Besides using the horizontal line as a decoration of your web page, it can serve other purposes, like:
- A separator that visually divides different pieces of your content
- A highlighter that emphasizes the important or key sections of a web page.
It is supported by all the popular browsers, Chrome, Firefox, Edge, Safari and Opera.
You cannot find a list of customizing horizontal line in HTML tips all in one place, except in this post.
Now you do have to search all over the place, to know how to create a specific horizontal line.
They all lined up here, so to speak.
Customizing horizontal lines
Here are ways how to style horizontal lines within your HTML pages.
1. Create solid horizontal line in html
It is in black color (this blog default body color).
This is the HTLM element:
This is how the solid horizontal line looks like:
To make the solid line thicker, change the pixel to a higher value.
For example, I change it to 5px.
<hr style="border-top: solid 5px;" />
Now it looks like this:
To change this solid horizontal line to other color, add the color code.
For example, I change it to orange color.
<hr style="border-top: solid 5px; color:#ff5606"/>
So it looks like this:
To use any color of your choice, just change the color code, color:#
This is another way to add a horizontal line in HTML.
To widen or thicken this solid horizontal line, increase the size value and also add in a color.
Without the color element, it is just an outline frame as seen below:
This is how it looks like after adding in the color black.
<hr width="100%" color="black" solid size="5" >
Now it appears like this:
To change this solid horizontal line into another color, this is the HTML element.
For example, I use the color orange.
<hr width="100%" color="#ff5606" solid size="5" >
It should look like this:
To use any color of your choice, just change the color code, color=.
2. Create a broad horizontal line in html
To set the height of the horizontal line, adjust the size attribute in pixels.
Here is an orange color line with the size of 50px.
<hr width="100%" color="#ff5606" size="50px" />
It looks like this:
To use any color of your choice, just change the color code, color=.
3. Create a dotted horizontal line in html
This is the HTLM element:
<hr style="border-top: dotted 2px;" />
The thin dotted horizontal line looks like:
To make the dots bigger, change the 1px to other higher pixel (px)
For example, I change it to 5px.
<hr style="border-top: dotted 5px;" />
This how the 5px dotted line looks like:
This is how to change the black dotted line to orange color.
Below is the HTML element:
<hr style="border-top: dotted 5px; color:#ff5606;" />
This is how the orange horizontal dotted line looks:
To use any color of your choice, just change the color code, color:#.
4. Create a dashed horizontal line in html
Now let's create a dashed horizontal line.
The procedure is similar to the dotted line, which I have just shown you.
Just change the word "dotted" to "dashed".
This is the HTLM element:
<hr style="border-top: dashed 2px;" />
This is how it looks like:
To make the dashed lines bolder, change the 2px to other higher pixel (px)
For example, I change it to 5px.
<hr style="border-top: dashed 5px;" />
This how the 5px dashed line looks like
This is how to change the black dashed line to orange color.
Below is the HTML element:
<hr style="border-top: dashed 5px; color:#ff5606;" />
This is how the orange horizontal dashed line looks:
5. Create double horizontal lines in html
This is the html element of a set of two parallel horizontal lines.
You can adjust the distance between the two lines by changing the height attribute.
<hr style="border-top: solid 3px;height: 5px; border-bottom: solid 3px;" />
This is how the two lines looks like:
This is how to create the two lines in different color, design and thickness.
Top orange dashed line with a solid black line beneath.
<hr style="border-bottom: solid black 5px; border-left-width: 0px; border-right-width: 0px; border-top: 3px dashed; color:#ff5606; height: 8px;" />
Here is the result:
6. Create a horizontal line width 50% in html
Here are three different versions in 5px.
solid: <hr style="border-top: solid 5px;" width="50%"/>
color: <hr style="border-top: solid 5px; color:#ff5606" width="50%"/>
pattern: <hr style="border-top: dotted 5px;" width="50%"/>
This is how they look like on your page.
These are various ways to customize horizontal lines in HTML.
RELATED TIPS: