CSS border-bottom-style Property
The border-bottom-style property in CSS is used to set the style of the bottom border of an element.
Syntax:
border-bottom-style: none|hidden|dotted|dashed| solid|double|groove|ridge|inset| outset|initial|inherit;
Property Values:
- none: It is the default value and it makes the width of the bottom border zero. Hence, it is not visible.
- hidden: It is used to make the bottom border invisible. It is similar to none value except in the case of border conflict resolution of table elements.
- dotted: It makes the bottom border with a series of dots.
- short-line: It makes the bottom border with a series of short-line segments.
- solid: It is used to make the bottom border with a single solid line segment.
- double: It makes the bottom border to double a solid line. In this case, the border width is equal to the sum of the widths of the two-line segments and the space between them.
- groove: It makes the bottom border with a grooved line segment, which makes feel that it is going inside.
- inset: It makes the bottom border with an embedded line segment, which makes feel that it is fixed deeply on the screen.
- outset: It is the opposite of inset. It makes the bottom border with a line segment, which appears to be coming out.
- initial: It sets the border-bottom-style property to its default value.
- inherit: The border-bottom-style property to be inherited from its parent element.
Example: In this example, we are using border-style; none; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style property </ title > <!-- Internal CSS Style Sheet --> < style > h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-bottom-style */ border-bottom-style: none; } </ style > </ head > < body > <!-- border-bottom-style:none; --> < h1 >w3wiki</ h1 > </ body > </ html > |
Output:
Example: In this example, we are using border-style: hidden; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style property </ title > <!-- Internal CSS Style Sheet --> < style > h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-bottom-style */ border-bottom-style: hidden; } </ style > </ head > < body > <!-- border-bottom-style:hidden; --> < h1 >w3wiki</ h1 > </ body > </ html > |
Output:
Example: In this example, we are using border-style: dotted; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style property </ title > <!-- Internal CSS Style Sheet --> < style > h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-bottom-style */ border-bottom-style: dotted; } </ style > </ head > < body > <!-- border-bottom-style:dotted; --> < h1 >w3wiki</ h1 > </ body > </ html > |
Output:
Example: In this example, we are using border-style: dashed; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style property </ title > <!-- Internal CSS Style Sheet --> < style > h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-bottom-style */ border-bottom-style: dashed; } </ style > </ head > < body > <!-- border-bottom-style:dashed; --> < h1 >w3wiki</ h1 > </ body > </ html > |
Output:
Example: In this example, we are using border-style: solid; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style property </ title > <!-- Internal CSS Style Sheet --> < style > h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-bottom-style */ border-bottom-style: solid; } </ style > </ head > < body > <!-- border-bottom-style:solid; --> < h1 >w3wiki</ h1 > </ body > </ html > |
Output:
Example: In this example, we are using border-style: double; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style property </ title > <!-- Internal CSS Style Sheet --> < style > h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-bottom-style */ border-bottom-style: double; } </ style > </ head > < body > <!-- border-bottom-style:double; --> < h1 >w3wiki</ h1 > </ body > </ html > |
Output:
Example: In this example, we are using border-style: groove; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style property </ title > <!-- Internal CSS Style Sheet --> < style > h1 { border: 10px; border-style: solid; /* CSS Property for border-bottom-style */ border-bottom-style: groove; } </ style > </ head > < body > <!-- border-bottom-style:groove; --> < h1 >w3wiki</ h1 > </ body > </ html > |
Output:
Example: In this example, we are using border-style: inset; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style property </ title > <!-- Internal CSS Style Sheet --> < style > h1 { border: 10px; border-style: solid; /* CSS Property for border-bottom-style */ border-bottom-style: inset; } </ style > </ head > < body > <!-- border-bottom-style:inset; --> < h1 >w3wiki</ h1 > </ body > </ html > |
Output:
Example: In this example, we are using border-style: outset; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style property </ title > <!-- Internal CSS Style Sheet --> < style > h1 { border: 10px; border-style: solid; /* CSS Property for border-bottom-style */ border-bottom-style: outset; } </ style > </ head > < body > <!-- border-bottom-style:outset; --> < h1 >w3wiki</ h1 > </ body > </ html > |
Output:
Example: In this example, we are using border-style: initial; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style property </ title > <!-- Internal CSS Style Sheet --> < style > h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property for border-bottom-style */ border-bottom-style: initial; } </ style > </ head > < body > <!-- border-bottom-style:initial; --> < h1 >w3wiki</ h1 > </ body > </ html > |
Output:
Example: In this example, we are using border-style: inherit; property.
html
<!DOCTYPE html> < html > < head > < title > CSS border-bottom-style Property </ title > <!-- Internal CSS Style Sheet --> < style > div { border-bottom-style: double; } h1 { color: green; text-align: center; border: 5px solid black; /* CSS Property | border-bottom-style */ border-bottom-style: inherit; } </ style > </ head > < body > < div > <!-- border-bottom-style: inherit; --> < h1 >w3wiki</ h1 > </ div > </ body > </ html > |
Output:
Supported Browsers: The browser supported by border-bottom-style property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 5.5 and above
- Firefox 1.0 and above
- Opera 9.2 and above
- Safari 1.0 and above
Contact Us