{"id":13968,"date":"2011-08-31T20:02:53","date_gmt":"2011-09-01T03:02:53","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13968"},"modified":"2023-02-03T10:01:01","modified_gmt":"2023-02-03T18:01:01","slug":"border","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border\/","title":{"rendered":"border"},"content":{"rendered":"\n

The border<\/code> property is a shorthand syntax in CSS that accepts multiple values for drawing a line around the element it is applied to.<\/p>\n\n\n\n

.belement{\n  border: 3px solid red;\n  width: 200px;\n  aspect-ratio: 1;\n}<\/code><\/pre>\n\n\n\n
 <\/div>\n\n\n\n\n\n\n
Syntax<\/h3>\n\n\n
border: <line-width> || <line-style> || <color><\/code><\/pre>\n\n\n
Values<\/h3>\n\n\n
The border<\/code> property accepts one or more of the following values in combination:<\/p>\n\n\n\n
    \n
  • border-width<\/code>: Specifies the thickness of the border.\n
      \n
    • : A numeric value measured in px<\/code>, em<\/code>, rem<\/code>, vh<\/code> and vw<\/code> units.<\/li>\n\n\n\n
    • thin<\/code>: The equivalent of 1px<\/code><\/li>\n\n\n\n
    • medium<\/code>: The equivalent of 3px<\/code><\/li>\n\n\n\n
    • thick<\/code>: The equivalent of 5px<\/code> <\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • border-style<\/code>: Specifies the type of line drawn around the element, including:\n
        \n
      • solid<\/code>: A solid, continuous line.<\/li>\n\n\n\n
      • none<\/code> (default): No line is drawn.<\/li>\n\n\n\n
      • hidden<\/code>: A line is drawn, but not visible. this can be handy for adding a little extra width to an element without displaying a border.<\/li>\n\n\n\n
      • dashed<\/code>: A line that consists of dashes.<\/li>\n\n\n\n
      • dotted<\/code>: A line that consists of dots.<\/li>\n\n\n\n
      • double<\/code>: Two lines are drawn around the element.<\/li>\n\n\n\n
      • groove<\/code>: Adds a bevel based on the color value in a way that makes the element appear pressed into the document.<\/li>\n\n\n\n
      • ridge<\/code>: Similar to groove<\/code>, but reverses the color values in a way that makes the element appear raised.<\/li>\n\n\n\n
      • inset<\/code>: Adds a split tone to the line that makes the element appear slightly depressed.<\/li>\n\n\n\n
      • outset<\/code>: Similar to inset<\/code>, but reverses the colors in a way that makes the element appear slightly raised. <\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • border-color<\/code>: Specifies the color of the border and accepts all valid color values.<\/li>\n<\/ul>\n\n\n\n
        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:<\/p>\n\n\n\n