Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Which property specifies the width of a border in CSS?
In CSS, the border-width property specifies the width of a border. You can set uniform width for all sides or specify different widths for each side of an element.
Syntax
border-width: value; border-width: top right bottom left; border-width: top-bottom left-right;
Method 1: Using border-width Property
The border-width CSS property allows you to define the width of borders. You can pass one to four values to control different sides
Example: Uniform Border Width
The following example sets a 5px border width for all four sides ?
<!DOCTYPE html>
<html>
<head>
<style>
.uniform-border {
border-style: dashed;
border-width: 5px;
border-color: red;
width: 400px;
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div class="uniform-border">
Welcome to CSS border styling!
</div>
</body>
</html>
A rectangle with red dashed borders of 5px width on all sides appears, containing the text.
Example: Different Border Widths
This example sets different border widths for each side using four values ?
<!DOCTYPE html>
<html>
<head>
<style>
.varied-border {
border-style: solid;
border-width: 5px 10px 15px 20px;
border-color: blue;
width: 400px;
height: 150px;
padding: 15px;
}
</style>
</head>
<body>
<div class="varied-border">
<p>Top: 5px</p>
<p>Right: 10px</p>
<p>Bottom: 15px</p>
<p>Left: 20px</p>
</div>
</body>
</html>
A blue bordered box with visibly different border thicknesses on each side - thinnest on top, thickest on left.
Method 2: Using border Property
The border property is a shorthand that accepts width, style, and color values in one declaration ?
<!DOCTYPE html>
<html>
<head>
<style>
.shorthand-border {
border: 1rem solid blue;
width: 300px;
height: 100px;
padding: 15px;
}
</style>
</head>
<body>
<div class="shorthand-border">
Border using shorthand property
</div>
</body>
</html>
A blue rectangle with thick solid borders (1rem width) containing the specified text.
Method 3: Individual Side Properties
You can control each border side individually using specific properties ?
<!DOCTYPE html>
<html>
<head>
<style>
.individual-sides {
width: 300px;
height: 80px;
padding: 10px;
margin: 10px;
border-style: solid;
border-color: green;
}
.top-only {
border-top-width: 8px;
}
.right-only {
border-right-width: 8px;
}
</style>
</head>
<body>
<div class="individual-sides top-only">Top border only</div>
<div class="individual-sides right-only">Right border only</div>
</body>
</html>
Two boxes appear: first with only a thick green top border, second with only a thick green right border.
Conclusion
The border-width property is the primary way to control border thickness in CSS. Use the shorthand border property for simple borders or individual side properties for precise control over specific edges.
372 Views
