CSS border-bottom-style Property

Sets the line style for the bottom edge of an element's border box. It defines whether the line is solid, dotted, dashed, or even 3D in appearance.

selector { border-bottom-style: value; }
none Specifies that no border should be rendered at the bottom.
hidden Similar to none, but used to resolve border conflicts in tables.
dotted Renders the bottom border as a series of round dots.
dashed Renders the bottom border as a series of short line segments.
solid Renders the bottom border as a single continuous line.
double Renders two parallel solid lines at the bottom of the element.
groove Creates a 3D carved effect that depends on the border color.
ridge Creates a 3D extruded effect that depends on the border color.
inset Makes the bottom border look like it is embedded into the page.
outset Makes the bottom border look like it is popping out of the page.

Code Examples

A basic example showing a solid bottom border applied to a div element.

<div style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #2ecc71; padding: 15px;">
  This box has a thick, solid green bottom border.
</div>

An advanced example using JavaScript to dynamically cycle through different border styles on user interaction.

<div id="interactiveNode" style="padding: 20px; border-bottom: 5px solid #333333; cursor: pointer;">
  Click me to cycle the border style.
</div>

<script>
const node = document.getElementById("interactiveNode");
const styles = ["dotted", "dashed", "double", "groove", "solid"];
let index = 0;

node.addEventListener("click", () => {
  index = (index + 1) % styles.length;
  const newStyle = styles[index];
  node.style.borderBottomStyle = newStyle;
  node.textContent = "Current Style: " + newStyle;
  node.style.borderBottomColor = "#3498db";
});
</script>

Pro Tip

The "double" value is an easy way to add a sophisticated design touch to headers or signatures without adding extra HTML tags or complex pseudo-elements. The space between the two lines actually shows the element's background, creating a clean, hollowed-out look that works great for formal layouts.

Deep Dive

Think of this property as picking the pen type for the bottom edge of your box. By default, every element has a style of "none," which is why borders don't just appear out of thin air. Even if you give a border a massive width and a bright color, it remains invisible until you define a style. This property is the gatekeeper for the border's rendering. It works within the box model to separate the element's padding from its margin at the bottom. When using 3D styles like "groove" or "ridge," the browser uses light and dark shades of your chosen border color to simulate depth.

Best Practices

Stick to "solid" for the vast majority of your UI components to keep things looking modern and clean. If you are creating custom text underlines that need to be further away from the text than standard decoration, this property is the way to go. If you find yourself setting the same style for every side of an element, save yourself the typing and use the "border-style" shorthand instead.

Common Pitfalls

The most frequent headache for beginners is the "invisible border" mystery. If you set a width and a color but forget the style, the border stays hidden because the default is "none." Another thing to watch is that 3D styles like "inset" and "outset" look different in every browser and can look dated or broken if the border color is too dark to allow for shading.

Accessibility

Don't rely on thin "dotted" or "dashed" styles alone to convey meaning, such as an error state or a clickable link. Users with low vision might have a hard time seeing those patterns. Always ensure the color of your border has a high enough contrast ratio against the background so the boundary is clear to everyone.

Dev Data Table: border-bottom-style property

default none
animatable no
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.borderBottomStyle = "dashed";
js_syntax_2 element.style.setProperty("border-bottom-style", "dotted");
js_note In JavaScript, use camelCase for the property name when accessing it through the style object.
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 }
results render here...