CSS border-bottom Property

Description

The border-bottom CSS property is used to define the styling of the bottom border of an element. It allows web developers to specify various aspects of the border, including its border-bottom-color, border-bottom-style, and border-bottom-width. This property is often used in conjunction with other border-related properties to create visually appealing and distinct design elements on a webpage. By adjusting the values of border-bottom, such as color, thickness, and whether it's solid, dashed, or dotted, designers can customize the appearance of underlines, separators, and other decorative or structural elements in their web layouts.

Initial value

See individual properties

Applies to

All elements

Inherited

No

Computed value

See individual properties

Animatable

Yes

JavaScript syntax

object.style.borderBottom

Interactive Demo

border-bottom: 3px solid red;

border-bottom: 2px dashed #1ECBE1;

border-bottom: 1rem dotted rgb(156, 234, 87);

border-bottom: thick solid rgba(123, 45, 87, .5);

border-bottom: solid;

border-bottom: dashed purple;

Syntax

border-bottom: <line-width> || <line-style> || <color>

Values

• <line-width>See border-bottom-width CSS property for values.
• <line-style>See border-bottom-style CSS property for values.
• <color>See border-bottom-color CSS property for values.
• inherit

Example

<div class="border">This is an example of the border-bottom property using a blue solid border 3px in width.</div>

.border {
   border: 1px solid #800000;
   border-bottom: 3px solid #6699FF;
   margin: 20px;
   padding: 20px;
}

Browser Support

The following table will show you the current browser support for the CSS border-bottom property.

Desktop
12	1	1	3.5	1

Tablets / Mobile
18	4	14	1	1	4.4

Last updated by CSSPortal on: 31st December 2023