border

The border CSS property is a shorthand property for setting all individual border property values at once: border-width, border-style, and border-color. As with all shorthand properties, any individual value that is not specified is set to its corresponding 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.

border: 1px;
border: 2px dotted;
border: medium dashed green;

<div class="row">
  <div class="cell">
    <div class="border b1">border: 1px;</div>
  </div>
  <div class="cell">
    <div class="border b2">border: 2px dotted;</div>
  </div>
  <div class="cell">
    <div class="border b3">border: medium dashed green;</div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
}

.row {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
}

.cell {
  flex: 1 auto;
  white-space: nowrap;
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  font: 1em monospace;
  overflow: hidden;
}

@media (max-width: 33em) {
  .row {
    flex-direction: column;
  }
}

.border {
  padding: .5em;
  height: 100%;
  box-sizing: border-box;
}

.b1  { border: 1px; }
.b2  { border: 2px dotted; }
.b3  { border: medium dashed green; }

Syntax

The border property is specified using one or more of the <br-width>, <br-style>, and <color> values listed below.

Values

<br-width>

Thickness of the border. Defaults to medium if absent. See border-width.

<br-style>

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

<color>

Color of the border. Defaults to the value of the element's color property. See border-color.

Formal syntax

<br-width> || <br-style> || <color>
where 
<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Examples

HTML

<div class="fun-border">Look at my borders.</div>
<p>You can edit the CSS below to experiment with border styles!</p>
<style contenteditable>
  .fun-border {
    border: 2px solid red;
  }
</style>

CSS

style {
  display: block;
  border: 1px dashed black;
}

Result

Specifications

Browser compatibility

See also

• border-radius-related CSS properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius