border | CSS-Tricks

Home CSS Almanac Properties B border

Author

7 Comments

Published

Aug 31, 2011

Updated

Apr 11, 2018

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

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

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

border-width: Specifies the thickness of the border.
- <length>: 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 <rgb()>, <rgba()>, <code><hsl()>, <hsla()>, <hex-color>, <named-color>, currentcolor and <deprecated-system-color>

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:

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

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

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

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

border-collapse: Specifies the spacing between borders on the <table> element.
border-image: Allows the use of an image to draw the border instead of a solid color.
border-radius: Provides control for rounded corners.

Comments