CSS border-bottom-style Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-bottom-style property drawing a solid dashed or dotted line under an element
Definition

Definition and Usage

The border-bottom-style property sets the line style of an element’s physical bottom border. It is one longhand of border-bottom, together with border-bottom-width and border-bottom-color.

The initial value is none, so nothing draws until you choose a visible style such as solid or dashed. For a writing-mode-aware end edge, use border-block-end-style. To set all four sides at once, use border-style.

Standard-track.

Not deprecated and not experimental. Supported in every major browser for many years, including Internet Explorer 4+.

Syntax

CSS Syntax

syntax.css
border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

The initial value is none. Pair a visible style with a width greater than 0.

Values

Property Values

ValueDescriptionTry it
noneDefault. No bottom border is drawnTry it
hiddenSame look as none, but can win in table border conflictsTry it
solidA single continuous lineTry it
dashedA series of short line segmentsTry it
dottedA series of round dotsTry it
doubleTwo parallel lines; needs a thicker width to show clearlyTry it
grooveLooks carved into the pageTry it
ridgeLooks raised off the pageTry it
insetLooks pressed into the pageTry it
outsetLooks pushed out from the pageTry it
initialSets this property to its default value, noneTry it
inheritInherits this property from the parent elementTry it
Approach

How to Use border-bottom-style

Pick a visible style, give the border a width, then optionally set a color.

  1. Set border-bottom-style to a visible keyword such as solid or dashed.
  2. Set border-bottom-width greater than 0 (for example 4px).
  3. Optionally set border-bottom-color, or rely on currentColor.
  4. Or use border-bottom to set width, style, and color together.
PieceRequired?Role
Visible styleYesnone draws nothing. Use solid, dashed, and the others
WidthYesWithout thickness, most styles still look missing
ColorOptionalDefaults to currentColor if omitted
Try it

Live Preview

Width and color stay fixed. Change only border-bottom-style and watch the bottom line.

Only the bottom edge changes. Top, left, and right stay blank.

Bottom style

Bottom edge

border-bottom-style: solid

Code

CSS Examples

Each snippet keeps width and color fixed so you can focus on border-bottom-style. Use Try It Yourself for a live editor.

Example 1 — Solid Bottom Line

A continuous solid line under the text.

CSS
<style>
  p {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #1d4ed8;
  }
</style>

<p>Solid bottom border</p>
Try It Yourself

How It Works

  1. Choose a visible style. solid draws a continuous bottom line.
  2. Give it thickness. border-bottom-width: 4px makes the line easy to see.
  3. Set a color. Blue shows clearly. Without a color, the border uses currentColor.
  4. Only the bottom. Top, left, and right stay untouched.

Example 2 — Dashed Divider

Short segments under the text for a lighter separator.

CSS
<style>
  p {
    border-bottom-width: 4px;
    border-bottom-style: dashed;
    border-bottom-color: #1d4ed8;
  }
</style>

<p>Dashed bottom border</p>
Try It Yourself

How It Works

  1. Change only the style. dashed draws short segments instead of a continuous line.
  2. Keep the same width. 4px still controls thickness.
  3. Keep the same color. The blue paint is unchanged.
  4. Still physical bottom. The dashes sit only on the bottom edge.

Example 3 — Double Line

Two parallel strokes. A thicker width helps both lines show.

CSS
<style>
  p {
    border-bottom-width: 6px;
    border-bottom-style: double;
    border-bottom-color: #1d4ed8;
  }
</style>

<p>Double bottom border</p>
Try It Yourself

How It Works

  1. Pick double. The browser draws two parallel lines on the bottom edge.
  2. Give it room. 6px leaves space between the strokes. A 1px double often looks like one line.
  3. Keep the color. Both strokes use the same blue.
  4. Still one side. Only the bottom border is styled.

Edge Cases & Pitfalls

If the border is missing, check the style keyword and the width before blaming the color.

none

Initial value draws nothing

The default is none. Setting only width or color still leaves no border until the style is visible.

width

Style without width looks empty

Browsers need a positive border-bottom-width. Use the border-bottom shorthand to set width, style, and color together.

hidden

hidden vs none

Both look invisible on normal boxes. In tables with border-collapse: collapse, hidden can suppress neighboring borders in a conflict.

physical

Always the physical bottom

Writing mode does not move this edge. Use border-block-end-style when the style must follow the block axis.

double

double needs thickness

A very thin double border often looks like a single line. Use at least a few pixels so both strokes show.

Compatibility

Browser Support

border-bottom-style is a browser style property. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

border-bottom-style

Chrome 1+, Firefox 1+, Safari 1+, Edge 12+, Opera 3.5+, Internet Explorer 4+. Safe everywhere in practice.

99% global support
Google Chrome 1+
Full support
Mozilla Firefox 1+
Full support
Apple Safari 1+
Full support
Microsoft Edge 12+
Full support
Opera 3.5+
Full support
Samsung Internet 1+
Full support
Internet Explorer 4+
Full support
border-bottom-style Universally supported

Bottom line: One of the oldest CSS border longhands. No prefix and no special fallback are needed in current or legacy desktop browsers.

Remember

Key Takeaways

  • Role: set the line style of the physical bottom border only.
  • Default: none. Choose solid, dashed, or another visible style.
  • Needs a width: style alone is not enough to see a line.
  • Physical edge: for logical block-end, use border-block-end-style.

One line: border-bottom-style chooses how the bottom border is drawn after width is set.

Frequently Asked Questions

It sets the line style of the physical bottom border only. Common values are solid, dashed, dotted, double, and none.
The initial value is none, so no bottom border is drawn until you choose a visible style such as solid or dashed.
none and hidden draw no line. You also need border-bottom-width greater than zero. Color defaults to currentColor.
border-bottom-style always targets the physical bottom edge. border-block-end-style follows the writing mode and stays on the logical block-end side.
Both look invisible on a normal box. In tables with border-collapse: collapse, hidden can suppress neighboring borders in a conflict.
It is supported in all modern browsers and goes back to Chrome 1, Firefox 1, Safari 1, Edge 12, Opera 3.5, and Internet Explorer 4. It is a browser style property, not a Node.js feature.

Next: border-bottom-width

Control how thick the physical bottom border is.

border-bottom-width tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS border-bottom-right-radius Property CSS border-bottom-width Property