The border-bottom-style property defines the line style of the bottom border on an element. It is useful when you want the bottom edge styled differently from the other sides.
Physical bottom edge.
Continuous line.
Soft dividers.
groove, ridge, inset.
No border by default.
Part of border-bottom.
The border-bottom-style CSS property specifies the style of the bottom border of an element. This property allows you to control the appearance of the bottom edge, enhancing design and visual hierarchy on your web pages.
By choosing different border styles such as solid, dashed, or dotted, you can create a variety of effects for section dividers, list separators, tabs, and footer rules.
A border only appears when border-bottom-style is not none. Pair it with border-bottom-width and border-bottom-color, or use border-bottom: 2px solid #000; as shorthand.
The syntax for border-bottom-style is straightforward:
selector {
border-bottom-style: <border-style>;
}p {
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #000;
}The style value refers to the border line type, such as solid, dashed, or dotted.
none, which hides the bottom border.solid, dashed, and dotted.groove, ridge, inset, and outset.border-bottom shorthand.border-bottom-width and border-bottom-color.| Question | Answer |
|---|---|
| Initial value | none |
| Applies to | Bottom border style only |
| Inherited | No |
| Animatable | No |
| Common use | Section dividers, footer rules, list separators |
The default value of border-bottom-style is none, meaning no bottom border is displayed until you choose a visible style.
The border-bottom-style property accepts standard CSS border style keywords.
| Value | Description |
|---|---|
none | No border is displayed |
solid | A single solid line |
dashed | A series of dashed lines |
dotted | A series of dotted lines |
double | Two solid lines with space between them |
groove | A 3D grooved border that looks carved in |
ridge | A 3D ridged border that looks raised out |
inset | A 3D inset border that looks embedded |
outset | A 3D outset border that looks raised |
hidden | Same as none, but can still affect table layout |
soliddotteddasheddoublegrooveridgeinsetoutsetborder-bottom-style always styles the visual bottom of an element, even when writing mode changes. For writing-mode-aware layouts, consider border-block-end-style instead.
vertical-rl)border-bottom-style vs border-block-end-style| Property | Targets | Best for |
|---|---|---|
border-bottom-style | Physical bottom border style | Simple horizontal pages, tabs, lists, and section dividers |
border-block-end-style | Logical block-end border style | Multilingual and writing-mode-aware layouts |
border-bottom | Width, style, and color together | When you want one shorthand for the full bottom border |
A box with a solid blue bottom border style:
Uses border-bottom-style: solid; with width and color longhands.
Try border-bottom-style with solid, dashed, dotted, and double bottom borders.
Set the bottom border style with width and color longhands so the line is visible.
Apply a solid bottom border to a paragraph with width and color.
<style>
p {
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #000;
}
</style>
<p>This paragraph has a solid bottom border with a width of 2 pixels and a color of black.</p>solid creates a continuous line on the bottom edge. Width and color make the border visible and styled.
Showcase solid, dotted, dashed, and double styles on the bottom edge.
<style>
.border-examples div {
border-bottom-width: 2px;
padding: 10px 0;
margin: 10px 0;
}
.solid {
border-bottom-style: solid;
border-bottom-color: #3498db;
}
.dotted {
border-bottom-style: dotted;
border-bottom-color: #e74c3c;
}
.dashed {
border-bottom-style: dashed;
border-bottom-color: #2ecc71;
}
.double {
border-bottom-style: double;
border-bottom-color: #f39c12;
}
</style>
<div class="border-examples">
<div class="solid">Solid Border Bottom</div>
<div class="dotted">Dotted Border Bottom</div>
<div class="dashed">Dashed Border Bottom</div>
<div class="double">Double Border Bottom</div>
</div>Each style keyword changes how the bottom line is drawn. double needs enough width to show two visible lines.
Use dashed and double styles for dividers and decorative bottom edges.
Use a dashed bottom border to separate stacked menu or list items.
.menu-item {
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: #cbd5e1;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
}dashed breaks the bottom border into short segments, which works well for subtle list separation.
Use a double style for a stronger decorative bottom edge on a callout box.
.callout {
border: 1px solid #e2e8f0;
border-bottom-style: double;
border-bottom-width: 4px;
border-bottom-color: #2563eb;
padding: 1rem;
background: #fff;
}You can override only the bottom style while keeping other sides on the border shorthand. double draws two parallel lines when width is large enough.
border-bottom-style WorksSet solid, dashed, dotted, or another border style keyword.
Pair the style with border-bottom-width and border-bottom-color.
Only the physical bottom border uses that line style. Top, left, and right sides stay unchanged.
Your element gets a clear visual separator on the physical bottom edge.
The border-bottom-style property is supported in all major browsers, including Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer. It is one of the most reliable CSS border properties.
Chrome, Firefox, Safari, Edge, and Opera all support border-bottom-style consistently.
Bottom line: Use border-bottom-style freely in any project. It works consistently across all browsers.
The border-bottom-style property provides a variety of options for styling the bottom border of an element, from simple lines to more complex effects like double and 3D styles.
By experimenting with different style keywords, you can enhance the visual appeal and user experience of your website with section dividers, list separators, tabs, and decorative accents.
solid for clear section dividers on the bottom edgedashed or dotted for softer separatorsborder-bottom shorthand when setting all three partsdouble enough width (usually 3px or more) to show two linesnone and expect a visible borderborder-bottom-style when you need a writing-mode-aware logical edgeborder-bottom-styleUse these points when styling the physical bottom edge.
Physical bottom edge.
PurposeHidden by default.
DefaultMost common styles.
ValuesPair with longhands.
SetupOther sides unchanged.
ScopeOpen the HTML editor, try border-bottom-style, and preview styled bottom borders instantly.
5 people found this page helpful