Setting Border Width for Individual Sides
You can also set the border width for individual sides of an element using the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.
/* Set border width for individual sides */
.example {
border-top: 2px; /* 2 pixels for top side */
border-right: 4px; /* 4 pixels for right side */
border-bottom: 6px; /* 6 pixels for bottom side */
border-left: 8px; /* 8 pixels for left side */
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>Border Width</title>
<style>
.GFG {
/* 2 pixels for top side */
border-top: 2px solid black;;
/* 4 pixels for right side */
border-right: 4px solid black;;
/* 6 pixels for bottom side */
border-bottom: 6px solid black;;
/* 8 pixels for left side */
border-left: 8px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="GFG">
Welcome to w3wiki
</div>
</body>
</html>
Output:
How to Set Border Width in CSS?
The CSS border-width property is used to set the border of an element. This property allows you to specify the width of the border for all four sides of an element or individually for each side. Here, we will cover all possible approaches with detailed explanations and code examples.
Table of Content
- Setting Border Width for All Sides
- Setting Border Width for Individual Sides
- Setting Border Width using Shorthand
Contact Us