Style borderStyle 속성

정의와 사용법

borderStyle 이 속성은 요소 경계선 스타일을 설정하거나 반환합니다.

이 속성은 한 가지에서 네 가지 값을 사용할 수 있습니다:

  • 한 가치를 예를 들어: p {border-style: solid} - 모든 네 가지 경계선이 실선
  • 두 가치를 예를 들어: p {border-style: solid dotted} - 상하 경계선은 실선, 좌우 경계선은 가려진 선
  • 세 가치를 예를 들어: p {border-style: solid dotted double} - 상단 경계선은 실선, 좌우 경계선은 점선, 하단 경계선은 두 배선
  • 네 가치를 예를 들어: p {border-style: solid dotted double dashed} - 상단 경계선은 실선, 우측 경계선은 가려진 선, 하단 경계선은 두 배선, 좌측 경계선은 가려진 선

추가로 참조:

CSS 강의:CSS 테두리

CSS 참조 가이드:border-style 속성

HTML DOM 참조 가이드:border 속성

예제

예제 1

<div> 요소에 실신경계선 추가：

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

직접 테스트해 보세요

예제 2

<div> 요소의 네 경계선 스타일 변경：

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

직접 테스트해 보세요

예제 3

반환 <div> 요소의 경계 스타일：

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

직접 테스트해 보세요

예제 4

모든 다른 값에 대한 설명:

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

직접 테스트해 보세요

문법

borderStyle 속성 반환:

object.style.borderStyle

borderStyle 속성 설정:

object.style.borderStyle = value
값 설명
none 경계선을 정의합니다. 기본.
hidden "none"과 같지만, 테이블 요소의 경계 충돌을 해결하는 데는 제외됩니다.
dotted 점막 경계선을 정의합니다.
dashed 점선 경계선을 정의합니다.
solid 실신경계선을 정의합니다.
double 두 경계선을 정의합니다. 두 경계선의 너비는 border-width의 값과 같습니다.
groove 3D groove 경계선을 정의합니다. 효과는 border-color 의 값.
ridge 3D ridge 경계선을 정의합니다. 효과는 border-color 의 값.
inset 3D inset 경계선을 정의합니다. 효과는 border-color 의 값.
outset 3D outset 경계선을 정의합니다. 효과는 border-color의 값에 따릅니다。
initial 이 속성을 기본 값으로 설정합니다. 참조 initial。
inherit 부모 요소에서 이 속성을 继承 합니다. 참조 inherit。

기술 세부 사항

기본 값： 없음
반환 값： 문자열로, 요소 경계 스타일을 나타냅니다。
CSS 버전： CSS1

브라우저 지원

크롬 에지 파이어폭스 사파리 오퍼라
크롬 에지 파이어폭스 사파리 오퍼라
지원 지원 지원 지원 지원