CSS | border-width Property
The border-width property in CSS is used to set the border width of all the four sides of an element. The border-width property is the combination of four property
Default Value:
- medium
Syntax:
border-width: length|thin|medium|thick|initial|inherit
Property Values:
- length: It is used to set the width of the border. It does not takes negative value.
- thin: It is used to set the thin border at the top of element.
- medium: It is used to set medium sized top border. It is the default value.
- thick: It is used to set the thick top border.
- initial: It is used to set the border-top-width to its default value.
- inherit: This property is inherited from its parent.
Example 1: This example set border-width to single value to all sides.
border-width: val;
- border-top-width: val;
- border-right-width: val;
- border-bottom-width: val;
- border-left-width: val;
HTML
<!DOCTYPE html><html> <head> <title> border-width property </title> <style> div { margin-bottom: 10px; border-style: solid; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <p>border-width property: [value]</p> <!-- This div has a uniform border of 10px around it. --> <div style="border-width: 10px"> This div has a border around it of 10px. </div> <!-- This div has a uniform thin border around it. --> <div style="border-width: thin"> This div has a thin border. </div> <!-- This div has a uniform medium border around it. --> <div style="border-width: medium"> This div has a medium border. </div> <!-- This div has a uniform thick border around it. --> <div style="border-width: thick"> This div has a thick border. </div> </body></html> |
Output:
Example 2: This example contains two value of border-width.
border-width: val1 val2;
- border-top-width: val1;
- border-right-width: val2;
- border-bottom-width: val1;
- border-left-width: val2;
HTML
<!DOCTYPE html><html> <head> <title> border-width property </title> <style> div { margin-bottom: 10px; border-style: solid; } </style> </head> <body> <h1 style = "color: green"> GeeksforGeeks </h1> <p>border-width property: [value] [value]</p> <!-- This div has a 5px border on the top and bottom, and 30px on the left and right. --> <div style = "border-width: 5px 30px"> This div has a border of 5px on the top and bottom, and 30px on the left and right. </div> <!-- This div has a thin border on the top and bottom, and thick on the left and right. --> <div style = "border-width: thin thick"> This div has a thin border on the top and bottom, and thick border on the left and right. </div> </body></html> |
Output:
Example 3: This example sets border-width to three value.
border-width: val1 val2 val3;
- border-top-width: val1;
- border-right-width: val2;
- border-bottom-width: val3;
- border-left-width: val2;
HTML
<!DOCTYPE html><html> <head> <title> border-width property </title> <style> div { margin-bottom: 10px; border-style: solid; } </style> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <p> border-width property: [value] [value] [value] </p> <!-- This div has a 5px border on the top, 30px on the left and right, and 15px on the bottom. --> <div style = "border-width: 5px 30px 15px"> This div has a 5px border on the top, 30px on the left and right, and 15px on the bottom. </div> <!-- This div has a thin border on the top, a thick border on the left and right,and a medium border on the bottom. --> <div style = "border-width: thin thick medium"> This div has a thin border on the top, a thick border on the left and right, and a medium border on the bottom. </div> </body></html> |
Output:
Example 4: This example contains four value to border-width property.
border-width: val1 val2 val3 val4;
- border-top-width: val1;
- border-right-width: val2;
- border-bottom-width: val3;
- border-left-width: val4;
HTML
<!DOCTYPE html><html> <head> <title> border-width property </title> <style> div { margin-bottom: 10px; border-style: solid; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <p> border-width property: [value] [value] [value] [value] </p> <!-- This div has a border of 5px on the top, 30px on the right, 15px on the bottom, and 2px on the left. --> <div style = "border-width: 5px 30px 15px 2px"> This div has a border of 5px on the top, 30px on the right, 15px on the bottom, and 2px on the left. </div> <!-- This div has a thin border on the top, thick border on right, medium border on the bottom, and thin border on the left. --> <div style = "border-width: thin thick medium thin"> This div has a thin border on the top, thick border on right, medium border on the bottom, and thin border on the left. </div> </body></html> |
Output:
Example 5: This example describes the initial value of border-width property.
HTML
<!DOCTYPE html><html> <head> <title> border-width property </title> <style> div { margin-bottom: 10px; border-style: solid; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <p>border-width property: initial</p> <!-- This div has the border width set to initial. --> <div style="border-width: initial"> This div has the default border width, which is the medium border. </div> </body></html> |
Output:
Example 6: This example describes the inherit property.
HTML
<!DOCTYPE html><html> <head> <title> border-width property </title> <style> div { margin: 10px; border-style: solid; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <p>border-width property: inherit</p> <!-- This div is the parent with the border width set to thick. --> <div id="parent" style="border-width: thin"> This is the parent div. <!-- This div inherits the border width from the parent div. --> <div style="border-width: inherit"> This div inherits the border width from the parent. </div> </div> </body></html> |
Output:
Supported Browsers: The browser supported by border-width property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Internet Explorer 4.0
- Apple Safari 1.0
- Opera 3.5
Please Login to comment...