border

Avatar of Sara Cope
Sara Cope on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

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

.box {
  border: 3px solid red;
  height: 200px;
  width: 200px;
}

Values

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

border:   ||  || 
    • 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.
    • color: Specifies the color of the border and accepts &lt;rgb()&gt;&lt;/rgb()&gt;, &lt;rgba()&gt;, <code>&lt;hsl()&gt;&lt;/hsl()&gt;, &lt;hsla()&gt;&lt;/hsla()&gt;, , , currentcolor and </rgba()>

<code>

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:

<code>

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

<code>

Browser Support

<code>

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

<code>

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

<code>

Related Properties

<code>

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.

<code>