Hariom Prajapati
22 Mar 2023
CSSIt is allow you to specify how the border width should look like.
Syntax -
border-width: width_value;
Some rules are :-
- If we use one width value in border-width property then width of all four side of the border will same width.
- If we use two width value in border-width property then, first width value use in top and bottom border width but second width value use in right and left border.
- If we use three width value in border property then , first width value use in top border , second width use in bottom border and third width use in left & right border.
- If we use four width value in border property then , first width value use in top border,second width value use in right border , third width value use in bottom border and fourth width value use in left border.(it start from top border and move clockwise to left)
Example -
If there is only one width value in border style property :
border-width: thin;
- width of all four borders are thin.
If there is two width values in border style property:
border-width: thin medium;
- width of top and bottom borders are thin.
- width of right and left borders are medium.
If there is three width values in border style property:
border-style: thin medium thick;
- width of top border is thin.
- width of right and left borders are medium.
- width of bottom border is thick.
If there is four width values in border style property:
border-width: thin medium thick 10px;
- width of top border is thin.
- width of right border is medium.
- width of bottom border is thick.
- width of left border is 10px.
Values
|
medium |
Specifies a medium border. |
|
thin |
Specifies a thin border. |
|
thick |
Specifies a thick border. |
|
length |
Allows you to define the thickness of the border.(in em, pt,px etc) |
For example:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style each side of border with different style</title>
<style>
.one_width {
border-style: solid;
border-width: thick;
}
.two_width {
border-style: solid;
border-width: thick 2px;
}
.three_width {
border-style: solid;
border-width: thin medium 6pt;
}
.four_width {
border-style: solid;
border-width: 5px 2em 3pt thin;
}
</style>
</head>
<body>
<h4 class="one_width">One width border!</h4>
<h4 class="two_width">two width border!</h4>
<h4 class="three_width">three width border!</h4>
<h4 class="four_width">four width border!</h4>
</body>
</html>
Output
Style each side of border with different width
We can write seperate tag for styling each border.
a) border-width: width_value;
b) border-width: width_value;
c) border-width: width_value;
d) border-width: width_value;
Values
|
medium |
Specifies a medium border. |
|
thin |
Specifies a thin border. |
|
thick |
Specifies a thick border. |
|
length |
Allows you to define the thickness of the border.(in em, pt,px etc) |
For Example:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style each side of border with different style</title>
<style>
.top_style {
border-top-style: dotted;
}
.bottom_style {
border-bottom-style: dashed;
}
.left_style {
border-left-style: solid;
}
.right_style {
border-right-style: double;
}
</style>
</head>
<body>
<h4 class="top_style">One style border!</h4>
<h4 class="bottom_style">two style border!</h4>
<h4 class="left_style">three style border!</h4>
<h4 class="right_style">four style border!</h4>
</body>
</html>
Output
