CSS | border-left-width Property
The border-left-width Property is used to sets the width of the left-border of an Element.It is mandatory to declare the border-style or the border-left-style property before the border-left-color property.
Syntax:
border-left-width: medium|thin|thick|length|initial|inherit;
Property Values: medium: It has a default value. It is used to specify a medium, size of left-border.
Syntax:
border-left-width:medium;
Example:
html
<!DOCTYPE html><html><head> <title> CSS | border-left-width Property </title> <style> h1 { color: green; } h3 { border: solid green; border-left-width: medium; width: 50%; } </style></head><body> <center> <h1>GeeksForGeeks</h1> <h2>border-left-width:medium;</h2> <h3>GeeksForGeeks</h3> <p style="border-style:dotted; border-left-width:medium; width:70%;"> It is a computer science portal for geeks.</p> </body></html> |
Output:
thin: It specifies a thin left border.
Syntax:
border-left-width:thin;
Example:
html
<!DOCTYPE html><html><head> <title> CSS | border-left-width Property </title> <style> h1 { color: green; } h3 { border: solid green; border-left-width: thin; width: 50%; } </style></head><body> <center> <h1>GeeksForGeeks</h1> <h2>border-left-width:thin;</h2> <h3>GeeksForGeeks</h3> <p style="border-style:dotted; border-left-width:thin; width:70%;"> It is a computer science portal for geeks.</p></body></html> |
Output:
Syntax:
border-left-width:thick;
Example:
html
<!DOCTYPE html><html><head> <title> CSS | border-left-width Property </title> <style> h1 { color: green; } h3 { border: solid green; border-left-width: thick; width: 50%; } </style></head><body> <center> <h1>GeeksForGeeks</h1> <h2>border-left-width:thick;</h2> <h3>GeeksForGeeks</h3> <p style="border-style:dotted; border-left-width:thick; width:70%;"> It is a computer science portal for geeks.</p></body></html> |
Output:
length: It specifies the thickness of the left-border in terms of pixel.
Syntax:
border-left-width: length;
Example:
html
<!DOCTYPE html><html><head> <title> CSS | border-left-width Property </title> <style> h1 { color: green; } h3 { border: solid green; border-left-width: 10px; width: 50%; } </style></head><body> <center> <h1>GeeksForGeeks</h1> <h2>border-left-width:length;</h2> <h3>GeeksForGeeks</h3> <p style="border-style:dotted; border-left-width:5px; width:70%;"> It is a computer science portal for geeks.</p></body></html> |
Output:
initial: It sets the property to its default value.
Syntax:
border-left-width:initial;
Example:
html
<!DOCTYPE html><html><head> <title> CSS | border-left-width Property </title> <style> h1 { color: green; } h3 { border: solid green; border-left-width: initial; width: 50%; } </style></head><body> <center> <h1>GeeksForGeeks</h1> <h2>border-left-width:initial;</h2> <h3>GeeksForGeeks</h3> <p style="border-style:dotted; border-left-width:initial; width:70%;"> It is a computer science portal for geeks.</p></body></html> |
Output:
Supported Browsers: The browser supported by CSS border-left-width property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Apple Safari 1.0
Please Login to comment...