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 bottom border to zero. Hence, it is not visible.
- Syntax:
border-bottom-style: none;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
hidden: It is used to make bottom border invisible. It is similar to none value except in case of border conflict resolution of table elements.
- Syntax:
border-bottom-style: hidden;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
dotted: It makes the bottom border with a series of dots.
- Syntax:
border-bottom-style: dotted;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
dashed: It makes the bottom border with a series of short line segments.
- Syntax:
border-bottom-style: dashed;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
solid: It is used to make the bottom border with a single solid line segment.
- Syntax:
border-bottom-style: solid;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
double: It makes the bottom border to double solid line. In this case, the border width is equal to the sum of widths of the two-line segments and the space between them.
- Syntax:
border-bottom-style: double;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
groove: It makes the bottom border with a grooved line segment, which makes feel that it is going inside.
- Syntax:
border-bottom-style: groove;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
inset: It makes the bottom border with an embedded line segment, which makes feel that it is fixed deeply on the screen.
- Syntax:
border-bottom-style: inset;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
outset: It is opposite of inset. It makes the bottom border with a line segment, which appears to be coming out.
- Syntax:
border-bottom-style: outset;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
initial: It sets the border-bottom-style property to its default value.
- Syntax:
border-bottom-style: initial;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
inherit: The border-bottom-style property to be inherited from its parent element.
- Syntax:
border-bottom-style: inherit;
- Example:
<!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
>GeeksForGeeks</
h1
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Supported Browsers: The browser supported by border-bottom-style property are listed below:
- Google Chrome 1.0
- Internet Explorer 5.5
- Firefox 1.0
- Opera 9.2
- Safari 1.0