borderBottom

Border-bottom is a CSS property used to define the bottom border of an element. It can be applied as a shorthand to set the width, style, and color in a single declaration, or as separate longhand properties to target specific aspects of the bottom border.

Syntax and values: The shorthand takes the form border-bottom: [border-width] [border-style] [border-color]; for example, border-bottom: 2px solid #333;. Longhand properties include border-bottom-width, border-bottom-style, and border-bottom-color, which can be used independently to adjust individual attributes.

Border width accepts values such as thin, medium, thick, or explicit lengths (px, em, etc.). Border style can be none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset. Border color accepts any CSS color value, including hex, rgb(a), hsl(a), or named colors.

Usage and effects: In standard layout, the bottom border is part of the element’s box model and can affect the element’s overall height depending on the box-sizing setting. On inline elements, borders are drawn along the bottom edge of the inline box, which can influence the visual rhythm of text. Borders can be animated with CSS transitions for hover and focus effects. When used in table layouts, borders interact with border-collapse and border-spacing properties to determine how separators appear between cells.

Browser support and variants: Border-bottom is widely supported across all modern browsers and does not require vendor prefixes. In JavaScript styling contexts, such as React, the equivalent property is borderBottom.