border-width 속성

border-width 속성은 모든 면의 테두리 두께를 동시에 또는 각 면별로 개별적으로 설정합니다. 이 속성은 border-left-width, border-right-width, border-top-width, border-bottom-width 속성에 대한 단축 속성입니다.

속성 값으로는 퍼센트를 제외한 크기 단위 또는 키워드 thin (2픽셀 테두리), medium (4픽셀 테두리), thick (6픽셀 테두리)를 사용할 수 있습니다. 기본값: medium.

구문

선택자 {
	border-width: 1, 2, 3 또는 4개의 값;
}

값의 개수

이 속성은 1개, 2개, 3개 또는 4개의 값을 공백으로 구분하여 지정할 수 있습니다:

개수	설명
`1`	모든 면에 동일하게 적용됩니다.
`2`	첫 번째 값은 위쪽과 아래쪽, 두 번째 값은 왼쪽과 오른쪽 테두리에 적용됩니다.
`3`	첫 번째 값은 위쪽, 두 번째 값은 왼쪽과 오른쪽, 세 번째 값은 아래쪽 테두리에 적용됩니다.
`4`	첫 번째 값은 위쪽 테두리, 두 번째 값은 오른쪽 테두리, 세 번째 값은 아래쪽 테두리, 네 번째 값은 왼쪽 테두리에 적용됩니다.

예제

1픽셀 두께의 테두리를 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

예제

4픽셀 두께의 테두리를 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	border-width: 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

예제

위쪽과 아래쪽 테두리 두께를 1px로, 오른쪽과 왼쪽 테두리 두께를 4px로 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	border-width: 1px 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

예제

위쪽 테두리 두께를 1px로, 오른쪽과 왼쪽 테두리 두께를 4px로, 아래쪽 테두리 두께를 6px로 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

예제

위쪽 테두리 두께를 1px로, 오른쪽 테두리 두께를 4px로, 아래쪽 테두리 두께를 6px로, 왼쪽 테두리 두께를 8px로 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	border-width: 1px 4px 6px 8px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

예제

thin 키워드를 사용하여 테두리 두께를 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	border-width: thin;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

예제

medium 키워드를 사용하여 테두리 두께를 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	border-width: medium;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

예제

thick 키워드를 사용하여 테두리 두께를 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	border-width: thick;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

예제

각 면마다 다른 테두리를 설정해 보겠습니다:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

함께 보기

테두리 스타일을 설정하는 속성 border-style,
테두리 색상을 설정하는 속성 border-color,
테두리에 대한 단축 속성 border,