border

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jul 28, 2021Updated Nov 16, 2023
Contribute to Docs

Shorthand property that sets different properties for an element’s border in a single declaration.

Syntax

border: <values>;

The border property accepts one or more of the following properties as values:

  • border-style(required)
  • border-color
  • border-width

Example 1

Setting a div elements border style to dashed.

div {
/* <border-style> */
border: dashed;
}

The following image demonstrates the code block above:

Border Shorthand Example 1

Example 2

Setting an img elements border to dotted, red and a width of 20px.

div {
/* <border-width> | <border-style> | <border-color> */
border: 20px dotted red;
}

The following image demonstrates the code block above:

Border Shorthand Example 2

All contributors

Looking to contribute?

Learn CSS on Codecademy