CSS border-bottom Property

Description

The border-bottom property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.

Initial value: See individual properties
Applies to: All elements
Inherited: No
Media: Visual
Computed value: See individual properties
Animatable: Yes
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.borderBottom

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

HTML

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

CSS

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

Result

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

4	12	1	1	3.5	1

Tablets / Mobile

1	18	4	14	1	1.0

Last updated by CSSPortal on: 12th October 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu