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
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

브라우저 호환성

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 YesSafari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown