How to Set Border Width in CSS?
Last Updated :
23 Jul, 2025
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.
Setting Border Width for All Sides
You can set the border width for all sides of an element using the border-width property. This property accepts one, two, three, or four values to specify the width of the border for the top, right, bottom, and left sides, respectively.
Syntax:
/* Set border width for all sides */
.example {
border: 2px; /* 2 pixels for all sides */
}
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Border Width</title>
<style>
/* Set border width for all sides */
.GFG {
/* 2 pixels width for all sides */
border: 2px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="GFG">
Welcome to GeeksforGeeks
</div>
</body>
</html>
Output:
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:
PHP
<!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 GeeksforGeeks
</div>
</body>
</html>
Output:
Setting Border Width using Shorthand
The border-width property can also be used as a shorthand to set the border width for all sides in a single declaration. You can specify one, two, three, or four values to set the width for the top, right, bottom, and left sides, respectively.
/* Set border width using shorthand */
.example {
border-width: 2px 4px 6px 8px; /* Top, right, bottom, left */
}
Example:
PHP
<!DOCTYPE html>
<html>
<head>
<title>Border Width</title>
<style>
.GFG {
/* Top, right, bottom, left */
border-width: 2px 4px 6px 8px;
/* Required for border-width shorthand */
border-style: solid;
border-color: black;
padding: 10px;
}
</style>
</head>
<body>
<div class="GFG">
Welcome to GeeksforGeeks
</div>
</body>
</html>
Output:
Similar Reads
CSS border-top-width Property The border-top-width property in CSS is used to set a specific width to the top border of an element. The border-top-style or border-style property is used for the element before using the border-top-width property.Default Value: mediumSyntax: border-top-width: length|thin|medium|thick|initial|inher
2 min read
How to set the width of the bottom border in CSS ? In this article we will learn about how to set the width of the bottom border in CSS, We can set the width of the bottom border using the border-bottom-width CSS property. We can give the size in pixels and also can give predefined values such as thick, thin...etc. Approach 1: We will use inline CSS
2 min read
How to Specify no Border in CSS ? When designing web pages, borders can be useful for highlighting elements or defining structure, but sometimes, you may want to remove them entirely for a cleaner or more modern look. In CSS, specifying no border is a straightforward process that helps you eliminate borders from HTML elements such a
3 min read
CSS border-width Property The border-width property in CSS sets the width of an element’s border. You can specify a single width for all four sides or define different widths for each side (top, right, bottom, and left). This property is crucial for creating visually appealing borders and enhancing the layout of your web pag
5 min read
Tailwind CSS Border Width This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS border-width property. This class is used to set the border width of all four sides of an element. The border-width property is the combination of four property B
2 min read
How to set border width using jQuery ? In this article, we will see how to set the border width using jQuery. To set the border width using jQuery, we will use css() method. This method is used to change the style property of the selected element. Syntax: $(selector).css(property, value) // Or $(selector).css({property: value, property:
2 min read