HTML Tag – Create Horizontal Line – POFTUT

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.

<hr> Tag


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.

Set Horizontal Line Thickness

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.

Set Horizontal Line Color

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.

Set Horizontal Line Width

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.

Dotted Horizontal Line

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.

Large Rounded Horizontal Line

Large Rounded Horizontal Line

Leave a Reply

Your email address will not be published. Required fields are marked *