border-right

div.test { border-right: dashed;}
div.test1 { border-right: dashed 2px;}
div.test2 { border-right: 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 value is set for 'border-color', the color specified by the 'color' property is used as the initial value.

Value	Description
none	No border is drawn and the width becomes 0. This is the initial value.
solid	The border is drawn as a single solid line.
dashed	The border is drawn as a dashed line with larger gaps.
dotted	The border is drawn as a dotted line with smaller gaps.
double	The border is drawn as two parallel lines.
groove	The border appears carved into the page. The opposite of 'ridge'.
ridge	The border appears raised from the page. The opposite of 'groove'.
inset	The border appears embedded into the page. The opposite of 'outset'.
outset	The border appears to pop out of the page. The opposite of 'inset'.

Value	Description
Number	Specifies the border width using a unit such as 'px'.
thin	Uses the keyword 'thin'. Most browsers render this as 1px, though it may vary slightly by browser.
medium	Uses the keyword 'medium'. Most browsers render this as 3px, though it may vary slightly by browser. This is the initial value when no 'border-width' is specified.
thick	Uses the keyword 'thick'. Most browsers render this as 5px, though it may vary slightly by browser.

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

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

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

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

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

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

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

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

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

※ Version information is based on MDN.

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

When 'border-right' is specified, any right border properties not included in the value are reset to their initial values. In other words, any right border properties set before 'border-right' are all reset.

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

To display any right border, you must always set a value for the 'border-style' property. Since the initial value of 'border-style' is 'none' (width 0), no border is drawn unless you specify a value.