HTML
Tag – Create Horizontal Line
The horizontal line provides the end of the given part in the HTML given part from the following part. HTML provides the <hr> tag which is a short form of horizontal in order to create horizontal lines.
<hr> Tag
Before HTML 5 the <hr> tag can have attributes like width , align , size but their are became absolute with the HTML5. But all of these attribute functions are provided with the CSS where we will examine them below.
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <hr> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </body> </html> |
Tag
Set Horizontal Line Thickness
We can set the horizontal Line size with the CSS attribute border-top . We will set the horizontal line size to the 10 pixels below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <style> /* Red border */ hr.red { border-top: 10px solid red; } </style> </head> <body> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <hr class="red"> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </body> </html> |
Set Horizontal Line Thickness
Set Horizontal Line Color
We can set the horizontal line color. We will use the border-top CSS attribute where we can specify different aspects like border size, type, and color. In this example, we will set the border color to red.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <style> /* Red border */ hr.red { border-top: 1px solid red; } </style> </head> <body> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <hr class="red"> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </body> </html> |
Set Horizontal Line Color
Set Horizontal Line Width
We can also set the horizontal line width with the width CSS attribute. We can provide the width with pixels or percentage of the page. In this example, we will set the horizontal line width to the 300 px.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <style> /* Red border */ hr.red { width:300px; } </style> </head> <body> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <hr class="red"> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </body> </html> |
Set Horizontal Line Width
Dotted Horizontal Line
The horizontal line type can be changed in different styles. We can make the horizontal line in the dotted form like below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <style> /* Red border */ hr.red { border-top: 10px dotted red; } </style> </head> <body> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <hr class="red"> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </body> </html> |
Dotted Horizontal Line
Large Rounded Horizontal Line
We can make the horizontal line a bit rounded with the border-radius CSS attribute. We will make the radius about 5px like below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <style> /* Red border */ hr.red { border-top: 10px solid red; border-radius:5px; } </style> </head> <body> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <hr class="red"> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </body> </html> |
Large Rounded Horizontal Line
