스타일 borderStyle 속성

<div> 요소에 "단색" 테두리를 추가합니다.

document.getElementById("myDiv").style.borderStyle = "solid";

정의 및 사용

borderStyle 속성은 요소의 테두리 스타일을 설정하거나 반환합니다.

이 속성은 1~4개의 값을 가질 수 있습니다.

p {border-style: solid}와 같은 하나의 값 - 네 개의 테두리가 모두 단색으로 표시됩니다.
다음과 같은 두 가지 값: p {border-style: solid dotted} - 위쪽 및 아래쪽 테두리는 실선으로 표시되고 왼쪽 및 오른쪽 테두리는 점선으로 표시됩니다.
다음과 같은 세 가지 값: p {border-style: solid dotted double}- 상단 테두리는 실선, 왼쪽 및 오른쪽 테두리는 점선, 하단 테두리는 이중
다음과 같은 4가지 값: p {테두리 스타일: 실선 점선 이중 파선} - 위쪽 테두리는 실선, 오른쪽 테두리는 점선, 아래쪽 테두리는 이중, 왼쪽 테두리는 파선

Property
borderStyle	Yes	Yes	Yes	Yes	Yes

borderStyle 속성을 반환합니다.

object.style.borderStyle

borderStyle 속성을 설정합니다.

object.style.borderStyle = value

Value	Description
none	Defines no border. This is default
hidden	The same as "none", except in border conflict resolution for table elements
dotted	Defines a dotted border
dashed	Defines a dashed border
solid	Defines a solid border
double	Defines two borders. The width of the two borders are the same as the border-width value
groove	Defines a 3D grooved border. The effect depends on the border-color value
ridge	Defines a 3D ridged border. The effect depends on the border-color value
inset	Defines a 3D inset border. The effect depends on the border-color value
outset	Defines a 3D outset border. The effect depends on the border-color value
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

<div> 요소의 네 테두리 스타일을 변경합니다.

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

<div> 요소의 테두리 스타일을 반환합니다.

alert(document.getElementById("myDiv").style.borderStyle);

다양한 가치의 시연:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;