Webzstore
The CSS 'border-bottom' property is a shorthand for setting the width, style, and color of an element's bottom border at once. This property streamlines the process of defining how an element's bottom border should appear, combining three aspects of border styling into a single declaration.
CSS 'border-bottom' Property Examples
See the Pen CSS 'border-bottom' Property by Webzstore (@webzstore) on CodePen.
The 'border-bottom' property offers a concise way to customize the appearance of an element's bottom border, enhancing the design flexibility and visual appeal of web pages.
Browser Support For 'border-bottom' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 1 | Dec 2008 |
| Edge | 12 | Jul 2015 |
| Firefox | 1 | Nov 2004 |
| Safari | 1 | Jun 2003 |
| Opera | 3.5 | Nov 1998 |
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 for the full compatibility details, including mobile browsers.
CSS Syntax of the 'border-bottom' Property
border-bottom: width style color | initial | inherit;
Usage of the 'border-bottom' Property
Use 'border-bottom' to apply specific styling to the bottom border of an element. This is particularly useful for visually distinguishing an element within a layout, such as underlining a heading for emphasis or denoting a boundary within a component. The shorthand property simplifies the code and enhances readability by consolidating border width, style, and color settings.
Property Values of the 'border-bottom' Property
- Width: Specifies the thickness of the border. Acceptable values include length units (e.g., px, em) and predefined thickness keywords (thin, medium, thick).
- Style: This determines the border's line style (none, solid, dotted, dashed, double, groove, ridge, inset, outset).
- Color: This sets the border's color. It can be defined using named colors, HEX codes, RGB(a), and HSL(a) values.
- Initial: Resets the 'border-bottom' to its default value, removing any custom styling applied to the bottom border.
- Inherit: Inherits the 'border-bottom' property from the element's parent, allowing for consistent border styling within nested elements.
