Table of Contents
When you want to visually divide your content with a horizontal line, you can use the HTML <hr>
element.
This element renders a horizontal line, which you can then extend further using CSS.
In this post, we'll learn how to use the <hr>
element to create a horizontal line.
Using the <hr>
element
The <hr>
element is a self-closing element, meaning it doesn't have any content inside of it.
Simply place it between your content and it will render a horizontal line.
Here's an example:
HTML<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
You can try it out for yourself:
- HTML
Customizing the <hr>
element
You can customize the <hr>
element by taking advantage of borders.
Here's an example of how you can customize the <hr>
element:
HTML<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
CSShr {
border: 0;
border-top: 1px solid red;
}
Try it out for yourself:
- HTML
- CSS
You can use any valid border styles here, like dashed
or dotted
to help get your desired effect.
Conclusion
In this post, we learned how to use the <hr>
element to create a horizontal line.
We also learned how to easily customize the <hr>
element using CSS.
Hope you enjoyed this post!
- How to Install Node on Windows, macOS and Linux
- Getting Started with Solid
- Getting Started with Express
- Git Tutorial: Learn how to use Version Control
- How to Serve Static Files with Nginx and Docker
- How to Set Up Cron Jobs in Linux
- How to deploy a .NET app using Docker
- Getting Started with Deno
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up Stylus CSS Preprocessor
- Setting Up a Local Web Server using Node.js