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
The border-width Property in CSS
The CSS border-width property is used to specify the width of an element's border. You can set the width for all sides at once or control individual sides using specific properties.
Individual border width properties include −
border-top-widthborder-right-widthborder-bottom-widthborder-left-width
Syntax
selector {
border-width: value;
}
Possible Values
| Value | Description |
|---|---|
thin |
A thin border (typically 1px) |
medium |
A medium border (typically 3px) |
thick |
A thick border (typically 5px) |
length |
A specific width in px, em, rem, etc. |
Example: Thick Border
The following example demonstrates a thick border using the border-width property ?
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border-style: solid;
border-width: thick;
border-color: #333;
text-align: center;
line-height: 100px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box">Thick Border</div>
</body>
</html>
A gray box with a thick black border appears centered on the page with the text "Thick Border".
Example: Thin Border
The following example demonstrates a thin border ?
<!DOCTYPE html>
<html>
<head>
<style>
.content {
padding: 20px;
border-style: solid;
border-width: thin;
border-color: #007bff;
margin: 20px;
}
.quote {
border-style: dashed;
border-width: thin;
border-color: #28a745;
padding: 10px;
font-style: italic;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<p>This paragraph has a thin blue border around it.</p>
</div>
<div class="quote">
"Education is the most powerful weapon which you can use to change the world."
</div>
</body>
</html>
Two boxes appear: one with a thin blue solid border containing a paragraph, and another with a thin green dashed border containing an italic quote.
Example: Medium Border with Specific Values
You can also use specific pixel values for precise control ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 150px;
border-style: double;
border-width: 8px;
border-color: #dc3545;
background-color: #fff3cd;
padding: 15px;
margin: 20px auto;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h3>Custom Border Width</h3>
<p>This box has an 8px double border.</p>
</div>
</body>
</html>
A yellow box with a red double border (8px width) appears centered on the page, containing a heading and paragraph.
Example: Individual Border Widths
You can set different widths for each side of an element ?
<!DOCTYPE html>
<html>
<head>
<style>
.individual-borders {
width: 250px;
height: 100px;
border-style: solid;
border-color: #6f42c1;
border-top-width: 2px;
border-right-width: 8px;
border-bottom-width: 4px;
border-left-width: 12px;
padding: 20px;
margin: 20px auto;
background-color: #f8f9fa;
text-align: center;
}
</style>
</head>
<body>
<div class="individual-borders">
<p>Different border widths:<br>
Top: 2px, Right: 8px<br>
Bottom: 4px, Left: 12px</p>
</div>
</body>
</html>
A light gray box appears with purple borders of different widths on each side: thin on top, thick on the left, medium on bottom and right.
Conclusion
The border-width property provides flexible control over border thickness using keywords like thin, medium, and thick, or specific values in pixels. Individual sides can be controlled using dedicated properties for precise styling.
121 Views
