Border Height in CSS

In web development, the “border” property plays a significant role. They may be utilized to distinguish or highlight stuff on a website, which makes it simple and easy for visitors to perceive and act on the site. Furthermore, the user can also determine the border height. Border height in CSS actually depends on the length of the border lines.

Sometimes, the user thinks the border will always be applied horizontally according to the element’s boundary. However, this concept is wrong. You can set the border height according to their preferences.

This post will explain how to set border height in CSS.

How to Set Border Height in CSS?

To set the border height in CSS, the “line-height” property is used. This property is commonly used for setting the distance between text lines.

For this purpose, try out the mentioned instructions.

Step 1: Create a “div” Container

Initially, make a “div” container with the help of the “<div>” element. Also, assign it a “class” attribute inside the opening tag of the “<div>” element and specify a name for the class according to your choice.

Step 2: Insert a Heading

Next, insert a heading by using any heading tag “<h1>” to “<h6>”. In this example, we have utilized the “<h2>” tag.

Step 3: Make a List

Then, utilize the “<ol>” tag to make the ordered list and add the data inside the list with the help of the “<li>” tag:

<div class="content">

<h1>List of Birds</h1>

<ol>

<li>Hen</li>

<li>Sparrow</li>

<li>Swine</li>

<li>Duck</li>

<li>Parrot</li>

</ol>

</div>

Output

Step 4: Set Border Height On “div” Element

Access the “div” container with the help of the class “.content” and apply the CSS properties mentioned in the below snippet:

.content {

padding: 0 10px;

display: inline-block;

border-left: 4px solid rgb(6, 21, 228);

line-height: 18px;

background-color: bisque;

margin: 20px 140px;

border-bottom: 4px solid rgb(241, 170, 14);

}

Here:

“padding” specifies a space inside the defined element.
“display” is set as “inline-block” for specifying the element’s display behavior.
“border-left” property is deployed to draw the boundary on the left side.
“line-height” is utilized for setting the height of the defined borderline according to the specified value.
“background-color” determines the color of the background of the selected element.
“margin” determines the space around the defined boundary.
“border-bottom” is utilized to set the boundary line at the bottom side of the element.

Output

As a result, the border height on the “div” element using CSS is applied successfully.

Conclusion

To set the border height in CSS, first, add the one-sided border with the help of “border-left” or “border-right” and apply the “line-height” property to specify the height of the border. Furthermore, you can also apply other CSS properties for styling the element. This post has demonstrated the procedure for setting the border height in CSS.