How to make a line in CSS

Create a line in CSS with an example: learn how to use the border property to draw lines of any color & width.

Creating a Line in CSS

Creating a line in CSS is a straightforward process. All you need to do is add the following code to your stylesheet:

.line {
    width: 100%;
    height: 1px;
    background: #000;
    margin-top: 25px;
    margin-bottom: 25px;
}

This code creates a line that is 100% of the width of the container and 1 pixel high. The background color of the line can be changed to any valid CSS color value. The margins at the top and bottom can also be adjusted to adjust the spacing.

To use the line in your HTML, you can simply add the following code wherever you want the line to appear:

<div class="line"></div>

You can also use the line class to style other elements, such as a horizontal rule:

<hr class="line">

Using the same code, you can also create a dashed line:

.line {
    width: 100%;
    height: 1px;
    background: #000;
    margin-top: 25px;
    margin-bottom: 25px;
    border-style: dashed;
}

In this case, the line will have a dashed border instead of a solid border. You can also adjust the border width and color to further customize the line.

Creating a line in CSS is a simple process that can be used to add visual interest to any web page. With a few lines of code, you can create a line that is customized to your needs.