How to add a horizontal line with div and hr example

How to add a horizontal line with div and hr example

It is a short tutorial with examples to make horizontal and vertical lines in CSS.

When we need to divide two HTML components, the hr tag in HTML creates a horizontal line between them. Horizontal lines in HTML are simple to create using the hr tag, border, or custom CSS styles.

Horizontal line in HTML

The hr tag in HTML uses to provide thematic breaks between content.

The hr tag in HTML uses to draw horizontal line breaks. The hr tag has the following features: - No closing tag is needed.

Here’s an HTML example of the horizontal line.

<!doctype html>
<html>
  <head>
    <style></style>
  </head>

  <body>
    <p>Paragraph1</p>
    <hr />
    <p>Paragraph2</p>
  </body>
</html>

horizontal line without hr tag

hr is a line break used to draw a line.

You can write a line without using the hr tag. As an example, How do I add a line to a div?

In this example, CSS border with color and line width

<!doctype html>
<html lang="en">
  <!doctype html>
  <html>
    <head>
      <style>
        .horizontal-line {
          padding-bottom: 20px;
          border-bottom: 3px solid #f0f0f0;
        }
      </style>
    </head>

    <body>
      <div class="horizontal-line">This is div element</div>
    </body>
  </html>
</html>