CSS border-bottom attribute

Definition and Usage

The borderBottom shorthand property sets all the bottom border properties in one declaration.

The following properties can be set in order:

If a value is not specified, it will not cause any issues, for example, border-bottom:solid #ff0000; is also allowed.

See also:

CSS Tutorial:CSS Borders

HTML DOM Reference Manual:borderBottom Property

Example

Set the bottom border style:

p
  {
  border-style:solid;
  border-bottom:thick dotted #ff0000;
  }

Try It Yourself

CSS Syntax

border-bottom: border-width border-style border-color|initial|inherit;

Property Value

Value Description
border-bottom-width Specifies the width of the bottom border. See also:border-bottom-width possible values.
border-bottom-style Specifies the style of the bottom border. See also:border-bottom-style possible values.
border-bottom-color Specifies the color of the bottom border. See also:border-bottom-color possible values.
inherit Specifies that the border-bottom property should be inherited from the parent element.

Technical Details

Default Value: not specified
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.borderBottom="3px solid blue"

More Examples

All bottom border properties in one declaration
This example demonstrates how to set all the bottom border properties in a single declaration using shorthand properties.

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

Note:Browsers prior to IE7 do not support the value "inherit". IE8 requires !DOCTYPE. IE9 supports "inherit".