CSS border-bottom Property

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

Definition and Usage

The border-bottom property is a shorthand that sets the width, style, and color of an element’s physical bottom border. It sets border-bottom-width, border-bottom-style, and border-bottom-color in one declaration.

It always targets the bottom edge of the box, not a logical side. For writing-mode-aware layouts, use border-block-end instead. Related physical sides are border-top, border-left, and border-right.

Standard-track.

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

Experimental.

A hairline width keyword appears in newer border specs, but browsers do not support it reliably yet. Prefer thin or a length such as 1px.

Syntax

CSS Syntax

syntax.css
border-bottom: <line-width> || <line-style> || <color> | initial | inherit;

Write the three parts in any order. You may omit one or two of them. Omitted parts reset to their defaults: medium, none, and currentColor.

Values

Property Values

ValueDescriptionTry it
<line-width>thin, medium, thick, or a length such as 4pxTry it
<line-style>Required for a visible border. Common values: solid, dashed, dotted, double, noneTry it
<color>Any CSS color. Defaults to currentColor if omittedTry it
noneNo bottom border. Also the default style when style is omittedTry it
initialResets to medium none currentColor (no visible border)Try it
inheritInherits this property from the parent elementTry it
Approach

How to Use border-bottom

Include a visible style, then add width and color as needed.

  1. Start with a style such as solid or dashed. Without it, the border stays hidden.
  2. Add a width when you need a fixed thickness (for example 4px or thick).
  3. Add a color when you do not want currentColor.
  4. Prefer longhands if you only want to change one part without resetting the others.
PieceRequired?Role
StyleYes (for a visible line)Default is none. Use solid, dashed, and the others
WidthOptionalDefaults to medium if omitted
ColorOptionalDefaults to currentColor if omitted
Try it

Live Preview

Only the bottom edge changes. Pick a common border-bottom value and watch the line.

Top, left, and right stay blank. Only the bottom border updates.

Bottom border

Bottom edge

border-bottom: 4px solid #1d4ed8

Code

CSS Examples

Each snippet uses only border-bottom. No extra layout CSS. Use Try It Yourself for a live editor.

Example 1 — Solid Bottom Line

A common divider: fixed width, solid style, and a clear color.

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

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

How It Works

  1. One shorthand. Width, style, and color sit in a single border-bottom declaration.
  2. Include the style. solid makes the line visible. Without it, the default none would hide the border.
  3. Fix the thickness. 4px keeps the same size in every browser, unlike the medium keyword.
  4. Only the bottom. Top, left, and right stay untouched.

Example 2 — Dashed Divider

A thinner dashed line under text, useful for subtle separators.

CSS
<style>
  p {
    border-bottom: 2px dashed #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 a small width. 2px keeps the divider light.
  3. Same color rule. The blue color still comes from the shorthand.
  4. Still physical bottom. The dashes sit on the bottom edge only.

Example 3 — Double Line

A thicker double border needs enough width for both strokes to show.

CSS
<style>
  p {
    border-bottom: 6px double #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 a single line.
  3. One declaration. Width, style, and color stay together in the shorthand.
  4. Still only the bottom. The other sides remain blank.

Edge Cases & Pitfalls

Most missing borders come from the shorthand resetting style to none.

reset

Omitting style hides the border

border-bottom: thick green; looks incomplete, but the missing style becomes none, so nothing draws. Always include a style, or set border-bottom-style on its own.

order

Shorthand after a longhand wins

If you set border-bottom-style: dotted and then border-bottom: thick green, the dotted style is wiped. Write the shorthand first, or put the longhand after it.

physical

Always the physical bottom

Vertical writing modes do not move this edge. Use border-block-end when the border must follow the block axis.

double

double needs thickness

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

box

Borders add to the box size

With the default content-box model, a bottom border increases the element’s outer height. Use box-sizing: border-box when you want the border inside a fixed height.

Compatibility

Browser Support

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

✓ Baseline · Widely available

border-bottom

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 Universally supported

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

Remember

Key Takeaways

  • Role: set width, style, and color of the physical bottom border only.
  • Style is required: omit it and the shorthand resets to none.
  • Any order: width, style, and color may appear in any order.
  • Physical edge: for logical block-end, use border-block-end.

One line: border-bottom paints the bottom edge when you include a visible style.

Frequently Asked Questions

It is a shorthand that sets the width, style, and color of the physical bottom border only. The other three sides stay unchanged.
As a shorthand it resets to medium none currentColor. Because the style is none, you see no border until you set a visible style such as solid.
The shorthand always resets omitted parts to their defaults. If you omit the style, it becomes none and the border vanishes. Include a style, or set the longhands separately.
border-bottom always paints the physical bottom edge. border-block-end follows the writing mode and stays on the logical block-end side.
Yes. Width, style, and color may appear in any order. You can also omit one or two of them, but omitted parts reset to their defaults.
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-color

Set only the color of the physical bottom border.

border-bottom-color 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-block-width Property CSS border-bottom-color Property