border
======

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

Try it
------

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

This property is a shorthand for the following CSS properties:

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


```css
/\* style \*/
border: solid;

/\* width | style \*/
border: 2px dotted;

/\* style | color \*/
border: outset #f33;

/\* width | style | color \*/
border: medium dashed green;

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


The `border` property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

**Note:** The border will be invisible if its style is not defined. This is because the style defaults to `none`.

### Values

`<line-width>`

Sets the thickness of the border. Defaults to `medium` if absent. See `border-width`.

`<line-style>`

Sets the style of the border. Defaults to `none` if absent. See `border-style`.

`<color>`

Sets the color of the border. Defaults to `currentcolor` if absent. See `border-color`.

Description
-----------

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, `border` cannot be used to specify a custom value for `border-image`, but instead sets it to its initial value, i.e., `none`.

The `border` shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand `border-width`, `border-style`, and `border-color` properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., `border-top` ) and logical (e.g., `border-block-start`) border properties.

### Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

* Outlines never take up space, as they are drawn outside of an element's content.
* According to the spec, outlines don't have to be rectangular, although they usually are.
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `border-color`: as each of the properties of the shorthand:
    + `border-top-color`: `currentcolor`
    + `border-right-color`: `currentcolor`
    + `border-bottom-color`: `currentcolor`
    + `border-left-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-width`: 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-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `border-color`: as each of the properties of the shorthand:
    + `border-bottom-color`: computed color
    + `border-left-color`: computed color
    + `border-right-color`: computed color
    + `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-color`: as each of the properties of the shorthand:
    + `border-bottom-color`: a color
    + `border-left-color`: a color
    + `border-right-color`: a color
    + `border-top-color`: a color
* `border-style`: discrete
* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: a length
    + `border-left-width`: a length
    + `border-right-width`: a length
    + `border-top-width`: a length
 |

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

border =   
  <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
--------

### Setting a pink outset border

#### HTML


```html
<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>
```


#### CSS


```css
div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}
```


#### Result

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

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

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

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

See also
--------

* `border-width`
* `border-style`
* `border-color`
* `outline`
* Backgrounds and borders
* Learn CSS: Backgrounds and borders