CSS border-bottom-width Property

Sets the thickness of the bottom border of an element.

selector { border-bottom-width: value; }

thin	Sets a thin bottom border width, which is typically 1px in most browsers.
medium	Sets a medium bottom border width, which is the default value and typically 3px.
thick	Sets a thick bottom border width, which is typically 5px.
<length>	Specifies a custom thickness using CSS units like px, em, rem, or vh.

Code Examples

A basic example showing how to apply a thick bottom border to a div using inline styles.

<div style="border-bottom-style: solid; border-bottom-width: 8px; border-bottom-color: #2196F3; padding: 20px;">
  This container has a thick blue bottom border.
</div>

An advanced example using JavaScript to dynamically update the border-bottom-width based on user interaction.

<div id="ui-card" style="padding: 20px; border-bottom: 2px solid #dddddd; transition: border-width 0.3s;">
  Hover over this card to see the border thickness change.
</div>

<script>
const card = document.getElementById("ui-card");
card.addEventListener("mouseenter", () => {
  card.style.borderBottomWidth = "10px";
  card.style.borderBottomColor = "#ff0000";
});
card.addEventListener("mouseleave", () => {
  card.style.borderBottomWidth = "2px";
  card.style.borderBottomColor = "#dddddd";
});
</script>

Pro Tip

If you are only changing the thickness of an existing border via user interaction, targeting border-bottom-width directly is more performant than re-declaring the entire border shorthand property.

Deep Dive

The border-bottom-width property controls only the thickness of the bottom edge of an element box. Think of it like choosing the thickness of a baseboard in a room; it only affects the floor-side line. For this property to have any visible effect, you must also define a border-style that is not "none" or "hidden". If no style is set, the width effectively acts as zero. By default, most browsers treat "medium" as 3 pixels, but using specific length units like pixels or rems provides much better precision across different devices.

Best Practices

Use relative units like rem or em if you want the border thickness to scale proportionally with the user's font size settings. Always ensure you have a border-style declared, otherwise your width setting will be ignored by the rendering engine.

Common Pitfalls

The most frequent mistake is defining a width but forgetting to set a border-style. Without a style, the border stays invisible. Also, remember that border width adds to the total size of an element unless you have set box-sizing to "border-box".

Accessibility

Do not rely on border thickness alone to convey meaning, such as indicating an error or a required field. Ensure there is enough color contrast between the border and the background so users with low vision can clearly see the element boundaries.

Dev Data Table: border-bottom-width property

default	medium
animatable	yes
inherited	no
experimental	no
year_intro	1996
year_standard	1996
js_syntax_1	element.style.borderBottomWidth = "5px";
js_syntax_2	element.style.setProperty("border-bottom-width", "5px");
js_note	When targeting this property in JavaScript, always specify the unit type as a string to ensure the browser renders the change correctly.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }