How to add horizontal line with div and hr example


This is a short tutorial with examples on how 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 is used to provide thematic breaks between content.

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

Here’s an html example of 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 that is 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>
Similar Posts