• Post category:HTML

Easy way to Create Vertical Rule using HTML hr tag

HTML vertical rule

Vertical rules also known as vertical dividers, help create a clear separation between different sections or elements within a web page. So, in this article, we will see about the HTML vertical rule and how you can use it to enhance the structure of your web design.

What is an HTML Vertical Rule?

It’s referred to as a vertical line or divider and it is a visual element used to create a vertical separation between content in a web page. It is typically a thin, straight line that spans the height of the container or a specific portion of the page. The vertical rule can be used to divide columns, sections, or groups of content, providing a visual hierarchy and improving the overall layout.

We can create horizontal rules or lines using HTML <hr> tags. The <hr> element is a self-closing tag and does not require a closing tag. We can also create a vertical rule using <hr> tag with some CSS to modify its appearance.

How to create a verticle rule?

To create a verticle rule in HTML, we need to use <hr> tag. By default, the <hr> element is rendered as a horizontal line, but with some CSS adjustments, you can transform it into a vertical line.

<html>
<head>
    <style>
        .vertical-line {
            border: none;
            border-left: 3px solid black;
            height: 100px;
        }
    </style>
</head>
<body>
    <hr class="vertical-line">
     <p>This is vertical-line</p>
</body>
</html>

Output:

html vertical rule

In this above example code, we have created the <hr> tag and set the classname ‘verticle-line’. In CSS,  select ‘verticle-line’ using the class selector and set the ‘border‘ to ‘none‘, ‘border’ to ‘1px solid black‘, and ‘height‘ to ‘100px‘.

READ ALSO  How to Create HTML Vertical Texts | Step by Step Guide

If you want to increase the height of your verticle rule, then you can use the CSS ‘height‘ property and set your desired height in px. If you want to increase the width of your verticle rule, then you can use the ‘border-width‘ property and set your desired width in px.

Conclusion

Vertical rules play a crucial role in web design by enhancing the structure and organization of content. So, you can create it using the above methods.

Leave a Reply