border

jameskeezer's avatar
jameskeezer's avatar
jameskeezer
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

Contribute to Docs

Learn CSS on Codecademy