border-bottom

Introduction

Used to set the styles related to the bottom border. This property allows setting border-bottom-width, border-bottom-style, and border-bottom-color in order.

Usage Examples

Syntax

/* Bottom border with thick double red lines */
border-bottom: thick double red;

/* Bottom border with thin dotted blue lines */
border-bottom: thin dotted blue;

/* Bottom border with a 10px dashed orange line */
border-bottom: 10px dashed orange;

Values

Accepts the following value types in order:

<line-width>
- See <border-bottom-width>
<line-style>
- See <border-bottom-style>
<color>
- See <border-bottom-color>

Formal Definition

Initial value	Empty
Applies to	All elements
Inherited	no
Animatable	no

Formal Syntax

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

<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Differences from the Web

mdn:border-bottom
Does not support global values like inherit, initial, revert, and unset

Compatibility

LCD tables only load in the browser

#border-bottom

#Introduction

#Usage Examples

#Syntax

#Values

#Formal Definition

#Formal Syntax

#Differences from the Web

#Compatibility