border

The border property is a shorthand syntax in CSS that accepts multiple values for drawing a line around the element it is applied to.

.belement{
  border: 3px solid red;
  width: 200px;
  aspect-ratio: 1;
}

Syntax

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

Values

The border property accepts one or more of the following values in combination:

• border-width: Specifies the thickness of the border.
  • : A numeric value measured in px, em, rem, vh and vw units.
  • thin: The equivalent of 1px
  • medium: The equivalent of 3px
  • thick: The equivalent of 5px
• border-style: Specifies the type of line drawn around the element, including:
  • solid: A solid, continuous line.
  • none (default): No line is drawn.
  • hidden: A line is drawn, but not visible. this can be handy for adding a little extra width to an element without displaying a border.
  • dashed: A line that consists of dashes.
  • dotted: A line that consists of dots.
  • double: Two lines are drawn around the element.
  • groove: Adds a bevel based on the color value in a way that makes the element appear pressed into the document.
  • ridge: Similar to groove, but reverses the color values in a way that makes the element appear raised.
  • inset: Adds a split tone to the line that makes the element appear slightly depressed.
  • outset: Similar to inset, but reverses the colors in a way that makes the element appear slightly raised.
• border-color: Specifies the color of the border and accepts all valid color values.

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

Constituent properties

The border property is a shorthand for the following border-related properties:

Physical Properties	Logical Properties
border-top	border-block-start
border-bottom	border-block-end
border-left	border-inline-start
border-right	border-inline-end

So, this:

.element {
  border: 3px solid #f8a100;
}

…is the same as:

.element {
  border-top: 3px solid #f8a100;
  border-right: 3px solid #f8a100;
  border-bottom: 3px solid #f8a100;
  border-left: 3px solid #f8a100;
}

…or the logical equivalent:

.element {
  border-block-start: 3px solid #f8a100;
  border-inline-end: 3px solid #f8a100;
  border-block-end: 3px solid #f8a100;
  border-inline-start: 3px solid #f8a100;
}

We can declare borders in just the block or inline direction since a couple of those logical properties have their own shorthands:

.element {
  /* The top (start) and bottom (end) borders */
  border-block: 3px solid #f8a100;
  /* The left (start) and right (end) borders */
  border-inline: 3px solid #f8a100;
}

Browser support

You can count on excellent support for the border property across all browsers.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Yes	Yes	Yes	3.5+	4+	Yes	Yes

More information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

Related