How to Make a Vertical Solid Line in CSS
Although HyperText Markup Language (HTML) provides a tag that creates a horizontal divider, there is not an equivalent element that creates a vertical line. A need for a vertical shape often arises, so this creates a dilemma. Fortunately, you have the option to use a workaround that incorporates an HTML table and applies Cascading Style Sheets (CSS) code to a border. Understand how to create the HTML code and apply the CSS rule that successfully makes a vertical, solid line.
Other People Are Reading
Instructions
-
-
1
Launch the Notepad text editor software, which comes with your Windows computer, and open a website document.
-
2
Position your cursor in the desired area where you want the solid line to appear. Enter the HTML code that creates a simple table:
<table>
<tr>
<td></td>
</tr>
</table>
-
-
3
Type the following code before the closing "</head>" element to create your CSS style rule for your table:
<style type="text/css">
<!--
table { }
-->
</style>
-
4
Enter "border-left: ;" or "border-right: ;" between the curly brackets to determine if your line appears on the left or right, and enter "solid" after the colon to specify this is how your line should appear. Type a number in pixels (px) to determine how wide the vertical line is, and enter a color, such as black, to specify the shade of the line. To illustrate:
table { border-left: 1px solid black; }
-
5
Type "height: ;" and type a number value in pixels (px) or percentage (%) to determine how long the line is. For instance:
table { border-left: 1px solid black; height: 300px; }
-
6
Save your file. Open it in a browser window by clicking the "Open" or "Open File" option under the browser's "File" menu. If you are satisfied with the vertical line, upload the file to your Web host to publish it. Otherwise, make adjustments to the values in your style rule before saving and uploading it to your host.
-
1
