border CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Try it

border: solid;

border: dashed red;

border: 1rem solid;

border: thick double #32a1ce;

border: 4mm ridge rgb(211 220 50 / 0.6);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css
/* style */
border: solid;

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

/* style | color */
border: outset #ff3333;

/* 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.

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 valueApplies toInherited Computed value Animation type

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

all elements. It also applies to ::first-letter.

as each of the properties of the shorthand:

border-width: as each of the properties of the shorthand:
- border-top-width: the absolute length or 0 if border-top-style is none or hidden
- border-right-width: the absolute length or 0 if border-right-style is none or hidden
- 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-style: as each of the properties of the shorthand:
- border-top-style: as specified
- border-right-style: as specified
- border-bottom-style: as specified
- border-left-style: as specified
border-color: as each of the properties of the shorthand:
- border-top-color: computed color
- border-right-color: computed color
- border-bottom-color: computed color
- border-left-color: computed color

as each of the properties of the shorthand:

border-width: as each of the properties of the shorthand:
- border-top-width: a length
- border-right-width: a length
- border-bottom-width: a length
- border-left-width: a length
border-style: discrete
border-color: as each of the properties of the shorthand:
- border-top-color: a color
- border-right-color: a color
- border-bottom-color: a color
- border-left-color: a color

Formal syntax

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

<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
This syntax reflects the latest standard as per CSS Borders and Box Decorations Module Level 4. Not all browsers may have implemented every part. See Browser compatibility for support information.

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;
}