CSS border-style 속성

정의와 사용법

border-style 속성은 요소의 모든 테두리 스타일을 설정하거나 각 테두리에 독립적으로 테두리 스타일을 설정합니다.

이 값이 none가 아니라면 테두리가 나타날 수 있습니다.

예제 1

border-style:dotted solid double dashed;
  • 위쪽 테두리는 점자 모양입니다
  • 오른쪽 테두리는 양선 모양입니다
  • 아래쪽 테두리는 두꺼운 선 모양입니다
  • 왼쪽 테두리는 가볍게 선 모양입니다

예제 2

border-style:dotted solid double;
  • 위쪽 테두리는 점자 모양입니다
  • 오른쪽 테두리와 왼쪽 테두리는 양선 모양입니다
  • 아래쪽 테두리는 두꺼운 선 모양입니다

예제 3

border-style:dotted solid;
  • 위쪽 테두리와 아래쪽 테두리는 점자 모양입니다
  • 오른쪽 테두리와 왼쪽 테두리는 양선 모양입니다

예제 4

border-style:dotted;
  • 모든 4개의 테두리는 점자 모양입니다

자세히 보기:

CSS 교본:CSS 경계선

HTML DOM 참조 매뉴얼:borderStyle 속성

예제

4 개의 경계선 스타일을 설정합니다:

p
  {
  border-style:solid;
  }

직접 시도해 보세요

CSS 문법

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

속성 값

값 설명
none 경계선을 정의합니다.
hidden "none"와 같습니다. 그러나 표에 적용할 때는 예외입니다. 표에 대해 hidden은 경계선 충돌을 해결하는 데 사용됩니다.
dotted 점선 경계선을 정의합니다. 대부분의 브라우저에서 실선으로 표시됩니다.
dashed 점선을 정의합니다. 대부분의 브라우저에서 실선으로 표시됩니다.
solid 실선을 정의합니다.
double 양선을 정의합니다. 양선의 너비는 border-width의 값과 같습니다.
groove 3D 파이프 경계선을 정의합니다. 이 효과는 border-color의 값에 따라 다릅니다.
ridge 3D 표면 경계선을 정의합니다. 이 효과는 border-color의 값에 따라 다릅니다.
inset 3D inset 경계선을 정의합니다. 이 효과는 border-color의 값에 따라 다릅니다.
outset 3D outset 경계선을 정의합니다. 이 효과는 border-color의 값에 따라 다릅니다.
inherit 부모 요소에서 경계선 스타일을 상속해야 합니다.

설명

가장 예측할 수 없는 경계선 스타일은 double입니다. 이는 두 줄의 너비와 이 두 줄 사이의 공간이 경계선 너비 값과 같아야 합니다. 그러나 CSS 표준은 이 두 줄 중 하나가 다른 줄보다 두꺼운지, 또는 두 줄이 같은 두께인지, 또는 줄 사이의 공간이 줄 두께보다 두꺼운지를 명시하지 않습니다. 모든 것이 사용자代理에 의해 결정되며, 작성자는 이 결정에 대해 어떤 영향도 미칠 수 없습니다.

기술 세부 사항

기본 값: not specified
thừa kế: no
버전: CSS1
JavaScript 문법: object.style.borderStyle="dotted double"

더 많은 예제

네 면 경계선 스타일 설정
이 예제에서는 네 면 경계선 스타일을 설정하는 방법을 보여줍니다.
각 면의 다른 경계선 설정
이 예제에서는 요소의 각 면에 다른 경계선을 설정하는 방법을 보여줍니다.

브라우저 지원

표中的 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5