border

div.test { border: dashed;}
div.test1 { border: dashed 2px;}
div.test2 { border: solid 2px #000;}

Value	Description
transparent	Sets the border color to transparent.
Color code or color name	Changes the border to the specified color. If no 'border-color' value is specified, the 'color' property value is used as the initial value.

Value	Description
none	No border is drawn. The width also becomes 0. This is the initial value.
solid	Draws a single solid line border.
dashed	Draws a dashed border with larger gaps.
dotted	Draws a dotted border with smaller gaps.
double	Draws a border with two lines.
groove	Draws a border that looks carved in. Opposite of 'ridge'.
ridge	Draws a border that looks raised. Opposite of 'groove'.
inset	Draws a border that looks embedded. Opposite of 'outset'.
outset	Draws a border that looks raised outward. Opposite of 'inset'.

Value	Description
Number	Specifies the border width in units such as 'px'.
thin	The keyword 'thin'. Typically rendered as 1px, though it may vary slightly by browser.
medium	The keyword 'medium'. Typically rendered as 3px, though it may vary slightly by browser. This is the initial value when no 'border-width' is specified.
thick	The keyword 'thick'. Typically rendered as 5px, though it may vary slightly by browser.

<div style="border: none; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border: solid 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border: dashed 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border: dotted 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border: double 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border: groove 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border: ridge 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border: inset 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border: outset 10px #cccccc; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

※ Version data based on MDN.

Sets the 'border-color', 'border-style', and 'border-width' properties all at once. The order of values does not matter.

When 'border' is specified, any border properties not explicitly set are reset to their initial values. The 'border-image' property — which cannot be set via 'border' — is also reset to 'none'. In other words, all previously specified border properties are overridden.

<div style="border-width: 10px; border-style: dashed; border: solid; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

To display a border, you must always specify a 'border-style' value. The initial value of 'border-style' is 'none' (width 0), so no border will be drawn unless a value is explicitly set.

The 'border' property cannot set each side independently. To set each side separately, use 'border-top', 'border-right', 'border-bottom', and 'border-left' respectively.