CSS border Property

CSS border property is used to set the width, style and color of the border in a single declaration.

A paragraph with a gold color solid border.

The border property is a shorthand of the following three border properties:

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

Try out the example below to see how it works:

Example:

h1{
  border: 5px solid yellow;
}
h2{
  border: 5px dashed red;
}
p{
  border: solid; /* Requires at least one value(border-style) */
}

If the border color is not specified, the color of border will be same as element’s text color. See the example below:

Example:

h1{
  border: solid;
  color: red; /* Text color */
}
h2{
  border: dashed;
  color: green; /* Text color */
}

CSS Syntax

The border property has the below syntax:

border: border-width border-style border-color|initial|inherit

Property Values

The border property accepts the following values:

border-widthSpecifies the width of the element’s border. The default value is ‘medium’.
border-styleSpecifies the style of the border. The default value is ‘none’.
border-colorSets the color of the border. Default value is the current color of text.
initialSets the border property to its default value.
inheritInherits the border property from the parent element.

General Info

Default Valuemedium none currentColor
InheritedNo
JavaScript Usageelement.style.border = “5px solid gold”;

Related Pages

CSS Tutorial: CSS Borders