border-style 속성

border-style 속성은 모든 면의 테두리 스타일을 동시에 또는 각각 따로 지정합니다. 다음 속성들의 단축 속성입니다: border-left-style, border-right-style, border-top-style, border-bottom-style.

문법

선택자 {
	border-style: 값;
}

값

값	설명
`solid`	실선.
`dotted`	점선 테두리.
`dashed`	파선 테두리.
`ridge`	융기된 선 모양 테두리.
`double`	이중선 테두리. 효과를 보려면 테두리 두께가 최소 `3px` 이상이어야 합니다.
`groove`	오목한 테두리.
`inset`	안쪽으로 들어간 테두리.
`outset`	바깥쪽으로 나온 테두리.
`none`	테두리 없음.

기본값: none.

값의 개수

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

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

예제 . solid 값

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

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

예제 . dotted 값

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

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

예제 . dashed 값

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

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

예제 . ridge 값

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

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

예제 . double 값

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

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

예제 . groove 값

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

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

예제 . inset 값

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

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

예제 . outset 값

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

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

예제

이 예제에서는 요소의 각 면에 서로 다른 테두리 타입을 지정합니다:

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

#elem {
	border-width: 1px;
	border-style: solid dotted dashed dotted;
	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;
}

예제

이제 위쪽과 아래쪽 테두리는 solid 타입으로, 오른쪽과 왼쪽 테두리는 dotted 타입으로 지정합니다:

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

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

같이 보기

테두리 색상을 지정하는 속성 border-color,
테두리 두께를 지정하는 속성 border-width,
테두리에 대한 단축 속성인 border,