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
The border-width Property in CSS
The CSS border-width property is used to specify the width for border of an element. We can also set width for individual sides using the following properties −
border-top-width
border-right-width
border-left-width
border-right-width
Syntax
The syntax of the CSS border-width property is as follows −
Selector {
border-width: /*value*/
}
The value can be thin, thick, or medium.
Set a thick border
The following example illustrate CSS border-width property. The thick border is set using the border-width property −
border-width: thick;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#main {
border-width: 20px;
}
div {
margin: auto;
height: 100px;
width: 80px;
border-style: double;
border-width: 5px;
}
div > div {
margin-top: 15px;
height: 50px;
width: 50px;
border-style: dashed;
border-color: red;
border-width: thick;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="main">
<div>demo</div>
</div>
</body>
</html>
Set a thin border
The following example illustrate CSS border-width property. The thin border is set using the border-width property −
border-width: thin;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 2%;
border-style: ridge;
border-width: 4px;
border-color: indianred;
}
q {
border-style: solid;
border-width: thin;
text-align: center;
font-style: italic;
}
</style>
</head>
<body>
<p>
Student details are covered here.
</p>
<hr>
<q>Education is the most powerful weapon which you can use to change the world.</q>
</body>
</html>
Set a medium border
The following example illustrate CSS border-width property. The medium border is set using the border-width property −
border-width: medium;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#main {
border-width: 20px;
}
div {
margin: auto;
height: 100px;
width: 80px;
border-style: double;
border-width: 5px;
}
div > div {
margin-top: 15px;
height: 50px;
width: 50px;
border-style: dashed;
border-color: red;
border-width: medium;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="main">
<div>demo</div>
</div>
</body>
</html>
Set the width of an element?s bottom border
To set the width of only the bottom border, use the border-left-width property −
border-bottom-width: 20px;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
border-bottom-width: 20px;
border-style: solid;
border-color: orange;
}
</style>
</head>
<body>
<h2>Accessories</h2>
<p>Displaying the car accessories</p>
<ul>
<li>Mud Flap</li>
<li>Car Freshener</li>
<li>Mobile Holder</li>
<li>Bluetooth</li>
<li>Wheel Lock</li>
</ul>
</body>
</html>
Set the width of an element?s top border
To set the width of only the top border, use the border-top-width property −
border-top-width: 20px;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
border-top-width: 20px;
border-style: solid;
border-color: blue;
}
</style>
</head>
<body>
<h2>Accessories</h2>
<p>Displaying the car accessories</p>
<ul>
<li>Mud Flap</li>
<li>Car Freshener</li>
<li>Mobile Holder</li>
<li>Bluetooth</li>
<li>Wheel Lock</li>
</ul>
</body>
</html>
Set the width of an element?s left border
To set the width of only the left border, use the border-left-width property −
border-left-width: 15px;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
border-left-width: 15px;
border-style: solid;
border-color: #d11c74;
border-left-style: ridge;
}
</style>
</head>
<body>
<h2>Accessories</h2>
<p>Displaying the car accessories</p>
<ul>
<li>Mud Flap</li>
<li>Car Freshener</li>
<li>Mobile Holder</li>
<li>Bluetooth</li>
<li>Wheel Lock</li>
</ul>
</body>
</html>
Set the width of an element?s right border
To set the width of only the right border, use the border-right-width property −
border-right-width: 20px;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
border-right-width: 20px;
border-style: solid;
border-color: blue;
}
</style>
</head>
<body>
<h2>Accessories</h2>
<p>Displaying the car accessories</p>
<ul>
<li>Mud Flap</li>
<li>Car Freshener</li>
<li>Mobile Holder</li>
<li>Bluetooth</li>
<li>Wheel Lock</li>
</ul>
</body>
</html>
105 Views
