The hr tag

The hr tag sets a horizontal dividing line. The advantage of the tag is that in order to draw a single line, you do not need to create extra blocks. Does not require a closing tag.

Example

Let's see how the hr tag works:

:

Example

Let's try to change the color of the line using the CSS property border-color:

:

Example

The line color can also be changed using the color property (in this case, if the color and border-color properties are set simultaneously, the second one has priority):

:

Example

Now let's change the color of the line using the CSS property border. Note that this will make the line double in thickness (since we set the border both at the top and bottom):

:

Example

Let's try to change the color of the line using the CSS property border-top, and set only the top border. Now there will be no double line:

:

Example

Let's make a line in the form of dots using the CSS property border-top, set the value to dotted instead of solid:

:

Example

Let's increase the line width using the CSS property border-width:

:

Example

Now let's add a height of height to the line and a border of border. The border will then split into an upper and lower border:

:

See also