border-right

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

시도해보기

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

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

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

구문

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

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

형식 구문

border-right = 
<line-width> ||
<line-style> ||
<color>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

예제

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

명세

Specification
CSS Backgrounds and Borders Module Level 3
# border-shorthands
초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter.
상속no
계산 값as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

브라우저 호환성

BCD tables only load in the browser