How to Make a Vertical Line in Html
How Do You Make a Vertical Line Using Html? 1 26 Answers Put a Around the Markup Where You Want the Line to Appear to Next, and Use Css to Style It...
How do you make a vertical line using HTML?
26 Answers
Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:
.verticalLine {
border-left: thick solid #ff0000;
}<div class="verticalLine">
some other content
</div>You can use the horizontal rule tag to create vertical lines.
<hr width="1" size="500">By using minimal width and large size, horizontal rule becomes a vertical one.
You can use an empty <div> that is styled exactly like you want the line to appear:
HTML:
<div class="vertical-line"></div>
With exact height (overriding style in-line):
div.vertical-line{
width: 1px; /* Line width */
background-color: black; /* Line color */
height: 100%; /* Override in-line if you want specific height. */
float: left; /* Causes the line to float to left of content.
You can instead use position:absolute or display:inline-block
if this fits better with your design */
}<div class="vertical-line" style="height: 45px;"></div>Style the border if you want 3D look:
div.vertical-line{
width: 0px; /* Use only border style */
height: 100%;
float: left;
border: 1px inset; /* This is default border style for <hr> tag */
} <div class="vertical-line" style="height: 45px;"></div>You can of course also experiment with advanced combinations:
div.vertical-line{
width: 1px;
background-color: silver;
height: 100%;
float: left;
border: 2px ridge silver ;
border-radius: 2px;
} <div class="vertical-line" style="height: 45px;"></div>You can also make a vertical line using HTML horizontal line <hr />
html, body{height: 100%;}
hr.vertical {
width: 0px;
height: 100%;
/* or height in PX */
}<hr class="vertical" />There is no vertical equivalent to the <hr> element. However, one approach you may want to try is to use a simple border to the left or right of whatever you are separating:
#your_col {
border-left: 1px solid black;
}<div id="your_col">
Your content here
</div>HTML5 custom elements (or pure CSS)
1. javascript
Register your element.
var vr = document.registerElement('v-r'); // vertical rule please, yes!
*The - is mandatory in all custom elements.
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
