border-right

border-right CSS 단축 속성은 요소의 오른쪽 테두리를 설정합니다. border-right-width, border-right-style, border-right-color의 값을 지정합니다.

다른 단축 속성과 마찬가지로, border-right는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

border-right-style: dotted;
border-right: thick green;
border-right-style: dotted;
border-right: none thick green;

따라서 border-right보다 먼저 지정한 border-right-style의 값은 무시됩니다. border-right-style의 기본값은 none이므로, border-style을 명시하지 않으면 테두리를 만들지 않습니다.

구문

border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;

border-right은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

<br-width>
border-right-width.
<br-style>
border-right-style.
<color>
border-right-color.

형식 구문

<line-width> || <line-style> || <color>

where
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

예제

<div>
  오른쪽 테두리를 가진 요소입니다.
</div>
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

명세

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-right' in that specification.
Candidate Recommendation No direct changes, though the modification of values for the border-right-color do apply to it.
CSS Level 2 (Revision 1)
The definition of 'border-right' in that specification.
Recommendation No significant changes.
CSS Level 1
The definition of 'border-right' in that specification.
Recommendation Initial definition
초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter.
상속no
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-rightChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 5.5Opera Full support 9.2Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support