How to Draw Horizontal and Vertical Lines in CSS

As we know, HTML provides the structure of web pages, and CSS can be utilized to apply styles. CSS also has different styling properties that are used to draw different shapes, such as squares, circles, rectangles, ovals, lines, and more. More specifically, a line is one of design’s most versatile and commonly used elements that can be added horizontally and vertically.

This article will teach the procedure to draw horizontal and vertical lines using CSS. Let’s get started!

How to Draw a Line with CSS?

To draw horizontal and vertical lines using CSS, different properties can be utilized, such as:

• “border-left”
• “border-right”
• “border-top”
• “border-bottom”

Let’s move ahead to understand the working of the above-provided properties one by one!

HTML
To draw lines, firstly, we will specify the “<div>” element inside the body of our HTML file:

Now, to style a div, utilize the suitable properties. In our case, we will assign the “background-color” property value as “#e4a2a4”, and the “border” property value as “2px solid #0fafc4”, which indicates its width, type, and color, respectively, and the “height” property is set as “200px”.

CSS

Example 1: Draw Horizontal Line with CSS
Usually, the <hr> element is utilized to draw horizontal lines in HTML. However, to draw a horizontal line with CSS, add <h1> element for the heading and then place a <div> named “h_line” inside the above-described div of the HTML file.

HTML

Now, use CSS properties to draw a horizontal line:

• We will use the “border-bottom” property, which is associated with one to three values for line width, line type, and color. The below-provided example sets its value as “6px solid rgb(80,80,78)”.
• To adjust the size of the line, we have set the “width” property value as “300px”.
• The “margin” property value is set as “auto”, representing that the margin is equal from all sides. The “bottom-top” property can also be utilized for this purpose.

CSS

Now, save the HTML file and open it in your browser:

As you can see, we have drawn a horizontal line successfully with the CSS border property.

Example 2: Draw Vertical Line With CSS
To draw a vertical line, we will add <h1> tag for the heading and then place a <div> named “v_line” inside the above-described div of the HTML file.

HTML

Let’s provide the “v_line” div with some CSS properties. To draw a vertical line, we will utilize:

• The “border-left” property is assigned with values “5px solid rgb(2, 99, 135)”, where the first value represents the line width, the second value represents the line type, and the third value indicates the color.
• The “bottom-right” property can also be utilized for the same purpose.
• Next, we have defined the “height” of the line by setting its value as “100px”.
• Set “margin” as “0 auto”, where 0 indicates the top and bottom and auto represents the equal margin to the left and right.
• To show the width of the line, we have assigned the “width” property value as “2px”.

CSS

Applying these values will draw a vertical line like this:

That’s it! We have used different CSS properties to draw horizontal and vertical lines.

Conclusion

You can use the “border-top” or “border-bottom” properties to draw a horizontal line and the “border-left” or “border-right” properties to draw a vertical line in CSS. This property has values one to three, where the first value defines the width, the second value defines its type, whether solid, dotted, dashed, or groove and the third value indicates the color of the line. This guide has explained how to draw horizontal and vertical lines with CSS.