기술
테두리 스타일 속성은 다음 테두리 스타일 중 하나를 선택할 수 있습니다-
none− 국경 없음. (border-width : 0;과 동일)
solid − 테두리는 단일 실선입니다.
dotted − 테두리는 일련의 점입니다.
dashed − 테두리는 일련의 짧은 선입니다.
double − 테두리는 두 개의 실선입니다.
groove − 테두리가 페이지에 조각 된 것처럼 보입니다.
ridge − 테두리는 그루브의 반대처럼 보입니다.
inset − 테두리는 상자가 페이지에 포함 된 것처럼 보이게합니다.
outset − 테두리는 상자가 캔버스에서 나오는 것처럼 보이게합니다.
hidden − 테이블 요소에 대한 경계 충돌 해결 측면을 제외하고 없음과 동일합니다.
다음 속성을 사용하여 요소의 아래쪽, 왼쪽, 위쪽 및 오른쪽 테두리의 스타일을 개별적으로 변경할 수 있습니다.
border-bottom-style − 하단 테두리의 스타일을 변경합니다.
border-top-style − 위쪽 테두리의 스타일을 변경합니다.
border-left-style − 왼쪽 테두리의 스타일을 변경합니다.
border-right-style − 오른쪽 테두리의 스타일을 변경합니다.
가능한 값
위에 정의 된 모든 값.
적용
모든 HTML 요소.
DOM 구문
object.style.borderStyle = "Any of the values defined above";
예
다음은 이러한 모든 테두리 스타일을 보여주는 예입니다.
<html>
<head>
</head>
<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>
이것은 다음 결과를 생성합니다-