Border
border
border is a shorthand for an element’s border. It sets border-width, border-style and border-color in any order, and any of them can be omitted.
Syntax
<line-width> || <line-style> || <color>Preview
Presets
Drag the bottom-right corner to resize
Shorthand breakdown
border8pxborder-width
solidborder-style
#88d1c7border-color
Code
.box {
border: 8px solid #88d1c7;
}Controls
border-width8px
border-stylesolid
border-color#88d1c7
About
Omitted parts fall back to their initial values
- Without
border-widthyou getmedium(3px in most browsers). - Without
border-styleyou getnone, so no border is drawn at all. If you set a width and color but see nothing, check this first. - Without
border-coloryou getcurrentcolor(the element’s text color).
It overwrites all four sides
border applies the same value to every side. To vary a side, write border-top and friends after it. Note that border also resets border-image to its initial value.