border-bottom
=============

The **`border-bottom`** shorthand CSS property sets an element's bottom border. It sets the values of `border-bottom-width`, `border-bottom-style` and `border-bottom-color`.

Try it
------

As with all shorthand properties, `border-bottom` always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:


```css
border-bottom-style: dotted;
border-bottom: thick green;
```


It is actually the same as this one:


```css
border-bottom-style: dotted;
border-bottom: none thick green;
```


The value of `border-bottom-style` given before `border-bottom` is ignored. Since the default value of `border-bottom-style` is `none`, not specifying the `border-style` part results in no border.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `border-bottom-color`
* `border-bottom-style`
* `border-bottom-width`
Syntax
------


```css
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

/\* Global values \*/
border-bottom: inherit;
border-bottom: initial;
border-bottom: revert;
border-bottom: revert-layer;
border-bottom: unset;
```


The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

### Values

`<br-width>`

See `border-bottom-width`.

`<br-style>`

See `border-bottom-style`.

`<color>`

See `border-bottom-color`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-bottom-width`: `medium`
* `border-bottom-style`: `none`
* `border-bottom-color`: `currentcolor`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
* `border-bottom-style`: as specified
* `border-bottom-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-color`: a color
* `border-bottom-style`: discrete
* `border-bottom-width`: a length
 |

Formal syntax
-------------
```

border-bottom =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Examples
--------

### Applying a bottom border

#### HTML


```html
<div>This box has a border on the bottom side.</div>
```


#### CSS


```css
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```


#### Results

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `border`
* `border-block`
* `outline`