The CSS border-bottom-width property is an essential tool for web developers, allowing them to control the width of the bottom border of an HTML element. This property is particularly useful when styling elements to ensure they fit the overall design layout effectively. In this article, we will explore the border-bottom-width property in detail, covering its definition, syntax, values, and more. Additionally, we will provide practical examples and browser support information, all crafted to be accessible for beginners in the realm of CSS.
Definition
The border-bottom-width property specifies the width of the bottom border of an element. It can take different units, making it versatile for various design scenarios. By adjusting the width, web designers can create clear outlines and enhance the separation between elements.
Syntax
selector {
border-bottom-width: value;
}
Property Values
Here are the main values that the border-bottom-width property can take:
Length
Specifying a length sets the width of the bottom border in fixed units such as pixels (px), ems (em), etc. For example:
| Length Value | Description |
|---|---|
5px |
A bottom border that is 5 pixels wide. |
0.25em |
A bottom border that is a quarter of the current font size wide. |
Percentage
Using a percentage value sets the bottom border width as a percentage of the containing block’s width. For example:
| Percentage Value | Description |
|---|---|
10% |
A bottom border that is 10% of the containing element’s width. |
Initial Value
The initial value of border-bottom-width is medium which is typically defined as 3px in most browsers.
| Value | Description |
|---|---|
medium |
The default border width, usually 3 pixels. |
Inherited Value
The border-bottom-width property is not an inherited property, meaning child elements will not inherit the border width from their parent elements.
| Inherited | Description |
|---|---|
| No | This property does not inherit its value from parent elements. |
Appliable to
This property can be applied to all HTML elements that can have a border, including div, p, and more. However, it is usually used in block elements like divs for better visibility.
Default Value
The default value of the border-bottom-width property is medium.
Example
Here is a simple responsive example to illustrate how to use the border-bottom-width property:
Example 1: Border Bottom Width
This box has a bottom border!