CSS 'border-bottom-width' Property Explained

The CSS 'border-bottom-width' property specifies the thickness of an element's bottom border. This property allows for precise control over the visual weight of the bottom border, enhancing the element's aesthetic appeal or emphasizing its boundary within a layout.

CSS 'border-bottom-width' Property Examples

See the Pen CSS 'border-bottom-width' Property by Webzstore (@webzstore) on CodePen.

The 'border-bottom-width' property is a key aspect of CSS that allows designers and developers to finely tune the appearance of an element's bottom border, enhancing the detail and precision of web page layouts.

Browser Support For 'border-bottom-width' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-bottom-width for the full compatibility details, including mobile browsers.

CSS Syntax of the 'border-bottom-width' Property

border-bottom-width: thin | medium | thick | length | initial | inherit;

Usage of the 'border-bottom-width' Property

Use 'border-bottom-width' to adjust the thickness of an element's bottom border. This can be particularly useful for drawing attention to or away from certain elements, creating visual hierarchies, or simply for decorative purposes. It allows for a flexible design approach, catering to both subtle and bold stylistic choices.

Property Values of the 'border-bottom-width' Property

• Thin: Specifies a thin bottom border.
• Medium: Specify a medium thickness for the bottom border, which is the default value.
• Thick: Specifies a thick bottom border.
• Length: Allows the specification of an exact thickness using CSS length units (e.g., px, em).
• Initial: Resets the 'border-bottom-width' to its default value (medium).
• Inherit: The element inherits the 'border-bottom-width' from its parent element.