CSS border-bottom-width Property
The border-bottom-width property in CSS is used to set a specific width to the bottom border of an element. The border-bottom-style or border-style property is used for the element before using the border-bottom-width property.
Syntax:
border-bottom-width: length|thin|medium|thick|initial|inherit;
Property Values: The border-bottom-width property values are listed below:
- thin: It is used to set the thin border of the bottom.
- medium: It is used to set a medium-sized bottom border. It is the default value.
- thick: It is used to set a thick bottom border.
- length: It is used to set the width of the border. It does not take a negative value.
Example: In this article we are using the above-explained property.
html
<!DOCTYPE html> < html > < head > < title > border-bottom-width property </ title > < style > #thin { border-color: green; border-bottom-style: solid; border-bottom-width: thin; } #medium { border-color: green; border-bottom-style: solid; border-bottom-width: medium; } #thick { border-color: green; border-bottom-style: solid; border-bottom-width: thick; } #length { border-color: green; border-bottom-style: solid; border-bottom-width: 20px; } </ style > </ head > < body style = "text-align:center" > < h1 style = "color:green" >w3wiki</ h1 > < h3 >border-bottom-width property</ h3 > < div id = "thin" > border-bottom-width: thin; </ div >< br >< br > < div id = "medium" > border-bottom-width: medium; </ div >< br >< br > < div id = "thick" > border-bottom-width: thick; </ div >< br >< br > < div id = "length" > border-bottom-width: length; </ div > </ body > </ html > |
Output:
Supported Browsers: The browser supported by border-bottom-width property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Safari 1.0 and above
Contact Us