In this article, we will learn to set the border’s size of any element using the CSS border-width property. It can take up to 4 values. Users can consider the below values for the border-width property and use them according to their requirements.
border-width property values:
- Thin: It specifies the thin border on the element.
- Medium: It specifies the medium border on the element, and it is the default value for the border-width property.
- Thick: It specifies the thick border on the element.
- Any-length: Users can define the size of the border width according to their needs in px, rem, or other units.
- Initial: It sets the border-width value to its default value.
- Inherit: It allows you to inherit border-width property from its parent element.
Syntax:
border-width: thin | medium | thick | any-length | initial | inherit;
Users can specify the border for only one side using the below border-width sub-properties.
- border-top-width: It allows to specify border width for the top side.
- border-right-width: It will enable to specify border width for the right side.
- border-bottom-width: It will allow specifying border width for the bottom side.
- border-left-width: It will allow specifying border width for the left side.
Example 1: If only one value is specified for the border-width property, It considers the same width for all four sides. The below example sets the medium border for all four sides. Users can see the medium border is applied on all four sides of the HTML div element.
<!DOCTYPE html> <html lang="en">
<head>
<title>Border-width</title>
<style>
.text {
border: solid;
border-width: medium;
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 35px;
color: green;
vertical-align: center;
}
</style>
</head>
<body>
<div class="text">
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
</div>
</body>
</html>
|
Output:
Example 2: If three values are specified for the border-width property, it considers the first width for the top, the second width for the left and right sides, and the third width for the bottom side border. The below example sets the thin border for the top side, a 20px border for the left and right sides, medium border for the bottom side. Users can see the thin border for the top side, 20px for the left and right sides, and the medium border for the bottom side.
<!DOCTYPE html> <html lang="en">
<head>
<title>Border-width</title>
<style>
.text {
border: solid;
border-width: thin thick;
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 35px;
color: green;
vertical-align: center;
}
</style>
</head>
<body>
<div class="text">
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
</div>
</body>
</html>
|
Output:
Example 3: If four values are specified for the border-width property, it considers the first width for the top, the second width for the right, the third width for the bottom, and the fourth width for the left side. The below example set 5px border for the top side, 10px border for the right side, 15px border for the left side, and 20px border for the bottom side. Users can see the 5px border for the top, 10px border for the right side, 15px border for the left side, and 20px border for the bottom side.
<!DOCTYPE html> <html lang="en">
<head>
<title>Border-width</title>
<style>
.text {
border: solid;
border-width: thin 20px medium;
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 35px;
color: green;
vertical-align: center;
}
</style>
</head>
<body>
<div class="text">
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
</div>
</body>
</html>
|
Output:
Example 4: Users can see how we can set up different values for every border side. Users can see the top border is 5px, right border is 1px, bottom border is 20px, and left border is initial (medium).
<!DOCTYPE html> <html lang="en">
<head>
<title>Border-width</title>
<style>
.text {
border: solid;
border-top-width: 5px;
border-right-width: 1px;
border-bottom-width: 20px;
border-left-width: initial;
width: 400px;
height: 400px;
margin: 30px auto;
font-size: 35px;
color: green;
vertical-align: center;
}
</style>
</head>
<body>
<div class="text">
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
</div>
</body>
</html>
|
Output:
Supported Browsers: The border-width property is supported by the below browsers.
- Chrome
- Firefox
- Microsoft Edge
- Safari
- Opera