Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
border-right-style

border-right-style

Specifies the style of the right border.

Sample Code

style.css

/* Solid line */
div.test { border-right-style: solid;}

/* Dashed line (larger gaps) */
div.test1 { border-right-style: dashed;}

/* Dotted line (smaller gaps) */
div.test2 { border-right-style: dotted;}

/* No border (default) */
div.test3 { border-right-style: none;}

/* Double line */
div.test4 { border-right-style: double;}

/* Carved-in look */
div.test5 { border-right-style: groove;}

/* Practical example: vertical separator in navigation */
.nav-item {
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #ddd;
	padding-right: 16px;
	margin-right: 16px;
}

Available Values

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'.

Browser Preview

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

Overview

Specifies the style of the right border.

If no value is set for 'border-right-style', it defaults to 'none'. With 'none', the border width becomes 0 and no border is drawn. To display any border, you must set 'border-right-style' to a value other than 'none'.