- How to Create Vertical Line in HTML
- 1) Using Border-Right, Height and Position CSS Property
- 2) Vertical line using Border-Left, Height, and Position CSS Property
- 3) Vertical line using hr Transform Property
- 4) Double Vertical line using CSS Property
- 5) Create Multiple Types (Double, Solid, Dashed, Dotted) Vertical Lines
- 8) Create Vertical Lines using Paragraph, Section and Article Containers
- 3 Ways To Create Vertical Lines In HTML CSS
- QUICK SLIDES
- TABLE OF CONTENTS
- DOWNLOAD & NOTES
- QUICK NOTES
- EXAMPLE CODE DOWNLOAD
- HTML CSS VERTICAL LINES
- 1) VERTICAL LINE WITH CSS BORDER
- 1A) THE RESULT
- 1B) HTML & CSS
- How to create a vertical line using HTML and CSS
- Learn JavaScript for Beginners 🔥
- About
- Search
- Tags
- How to Draw Horizontal and Vertical Lines in CSS
- How to Draw a Line with CSS?
- Conclusion
- About the author
- Sharqa Hameed
- HTML Vertical Lines
- Using Border
- Using Horizontal Rule
- Vertical Line Using Horizontal rule
- Vertical Line Using Border
- Right Vertical Line Using Border
- Centre Line Using Border
- Vertical Line Using Horizontal rule
- Examples
- Conclusion
How to Create Vertical Line in HTML
You might have a couple of reasons to create a vertical line on your web page but HTML does not have any element for vertical lines. Although HTML only have the element for a horizontal line; but still there are multiple ways to create a vertical line in HTML as mentioned below:
- Using Border CSS Property
- Using width and height CSS Property
- Using hr Transform Property
Here in this article, we have explained all possible ways to create Vertical line in HTML:
1) Using Border-Right, Height and Position CSS Property
/* Applying the style on the complete body of html page */ body < text-align: center; >/* CSS to add vertical line in the right */ .verticalLine Vertical Line using HTML and CSS
using border-right, height and position property
2) Vertical line using Border-Left, Height, and Position CSS Property
/* Applying the style on complete body of html page */ body < text-align: center; >/* CSS to add vertical line in the left */ .verticalLine Vertical Line using HTML and CSS
vertical line using border-left, height and position property
3) Vertical line using hr Transform Property
A vertical line can be created in HTML using transform property in
tag. With the help of this property, you can rotate a horizontal line to a vertical line.
body < text-align: center; >hr Vertical Line using hr Transform Property
4) Double Vertical line using CSS Property
/* Applying the style on complete body of html page */ body < text-align: center; >/* CSS to add vertical line in the right */ .verticalLine Vertical Line using HTML and CSS
double vertical line
5) Create Multiple Types (Double, Solid, Dashed, Dotted) Vertical Lines
div.dotted < border-style: none dotted none none; margin: 10px; padding: 10px; right: 55.5%; position: absolute; >div.dashed < border-style: none dashed none none; margin: 10px; padding: 10px; right: 66%; position: absolute; >div.solid < border-style: none solid none none; margin: 10px; padding: 10px; right: 77%; position: absolute; >div.double Vertical Line using HTML and CSS
dotted vartical line. dashed vartical line. solid vartical line. double vartical line. 8) Create Vertical Lines using Paragraph, Section and Article Containers
body < text-align: center; >.paragraphWithVertcalLine < border-right: 1px solid #000; width: 300px; height: 300px; >.sectionWithVertcalLine < border-right: 1px solid #000; width: 300px; height: 300px; >.articleWithVertcalLine vertical line with paragraph container
vertical line with paragraph section container vertical line with article container 3 Ways To Create Vertical Lines In HTML CSS
Welcome to a tutorial on how to create vertical lines in HTML and CSS. Want to add a vertical line beside a paragraph or section of the page?
That covers the quick basics, but read on for more examples!
ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
QUICK SLIDES
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming .
EXAMPLE CODE DOWNLOAD
Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
HTML CSS VERTICAL LINES
All right, let us now get into the examples of creating vertical lines in HTML and CSS.
1) VERTICAL LINE WITH CSS BORDER
1A) THE RESULT
1B) HTML & CSS
/* (A) LEFT BORDER */ .border-l < /* (A1) VERTICAL LINE ON LEFT */ /* BORDER : THICKNESS STYLE COLOR */ border-left: 5px solid red; /* (A2) COSMETICS */ padding: 20px; background: #ffeded; >/* (B) RIGHT BORDER */ .border-r < /* (B1) VERTICAL LINE ON RIGHT */ /* SOLID | DOTTED | INSET | DASHED | DOUBLE */ border-right: 5px dashed blue; /* (B2) COSMETICS */ padding: 20px; background: #f0edff; >As in the introduction, the easiest way to create a vertical line is to add border-left or border-right . But take note of how we can control the lines – border: THICKNESS STYLE COLOR . If you are new to HTML/CSS, just take a moment to walk through all the measuring units and color systems. That will lessen your pains, links below.
How to create a vertical line using HTML and CSS
Posted on Aug 12, 2021
To create a vertical line using HTML and CSS, you can set a CSS rule for
tags with the class vertical as follows:
First, you need to normalize the default border and margin properties added by the browser.
Next, the width, style, and color of the vertical line is set using the shorthand border-left property, while the height property will set the height of the vertical line.
The float:left property is added so that the vertical line can be displayed on the left side of another element.
The following HTML markup:
Will produce the following output:
Alternatively, you can also remove the
tag and create a vertical line by adding a border-left or border-right property to any element that you want to have a vertical line.
For example, here’s how to add a vertical line on the right side of the
tag:
Will produce the following output:
You will need to adjust the CSS style depending on the context and where you want to place the vertical line. But a vertical line can always be created using the
tag.
If you need to add the vertical line on the side of another element, you can use either the border-left or border-right property with the attached element.
Learn JavaScript for Beginners 🔥
Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.
A practical and fun way to learn JavaScript and build an application using Node.js.
About
Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.
Search
Type the keyword below and hit enter
Tags
Click to see all tutorials tagged with:
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:
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 “ ” 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”.
Example 1: Draw Horizontal Line with CSS
Usually, the
element is utilized to draw horizontal lines in HTML. However, to draw a horizontal line with CSS, add element for the heading and then place a named “h_line” inside the above-described div of the HTML file.
Horizontal Line < / h1 >
< / div >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.
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 tag for the heading and then place a named “v_line” inside the above-described div of the HTML file.
Vertical Line < / h1 >
< / div >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”.
.v_line {
border-left : 5px solid rgb ( 2 , 99 , 135 ) ;
height : 100px ;
margin : 0 auto ;
width : 2px ;
}
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.
About the author
Sharqa Hameed
I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.
HTML Vertical Lines
In a previous article, we discussed the importance and construction of horizontal lines. In this article, we will talk about vertical lines — why they are useful, and how we can construct them in multiple ways.
Vertical lines are the opposite of the
tag. Depending on your use case, you may be using them for the following (but not limited to these) options:
- Separation of information between columns, vertical containers
- Quoting some content (a saying, an excerpt from a book, a code block) in an article
- Drawing a top-to-bottom timeline
- Drawing graph elements
Let’s dive into how to draw them.
Using Border
For drawing vertical lines using borders, the most useful borders are the right and left ones. We can choose one (or two based on requirements), style the appearance, and set the alignment to fulfill our line requirements.
This is how we can get a left vertical line.
Vertical Line Using Border
div.vertical-line < height: 50px; margin: 10px; >div.vertical-line.left
We have separated the class vertical-line for reusability in the right and center lines. For the right line, all we need to do now is
Right Vertical Line Using Border
And for the center, we need to position our line to 50% from the parent endpoint. The direction is dependent on what border we selected — left or right. In the following example, we use a left border.
Using Horizontal Rule
We can create vertical lines from
tags by turning the tables. All we need our
tag is to have a width much smaller than the height. While we can achieve so in HTML alone using the tag’s width and size properties, these are legacy attributes. MDN Browser Compatibility Chart clearly states that these properties are deprecated and not reliable for cross-browser implementations. Instead, it’s better to style it using CSS. More details can be found in the spec.
Vertical Line Using Horizontal rule
Vertical Line Using Border
Right Vertical Line Using Border
Centre Line Using Border
Vertical Line Using Horizontal rule
body < font-family: sans-serif; >div.vertical-line < height: 50px; margin: 10px; >div.vertical-line.left < border-left: 3px solid #48abe0; >div.vertical-line.right < border-right: 3px solid #48abe0; >div.vertical-line.centre < border-left: 3px solid #48abe0; position: relative; left: 50%; >hr
This was a fundamental example. Let’s take a look at some enhanced versions.
Examples
This codepen demonstrates a vertical line by creating a subtle gradient with box-shadow.
This codepen integrates vertical lines into bootstrap columns with number icons.
We can create even a zigzag line.
Conclusion
Vertical Separators / Lines are handy elements. We can construct them either using borders or by turning tables on the dimensions of the horizontal rule
.
UnusedCSS helps website owners remove their unused CSS every day. Sign Up to see how much you could remove.
You Might Also Be Interested In