CSS 경계선

CSS 경계 속성

CSS border 속성은 요소 경계의 스타일, 너비, 색상을 지정할 수 있습니다。

저의 모든 경계는 경계를 가지고 있습니다。

저는 붉은색 하단 경계를 가지고 있습니다。

저는 둥근 경계를 가지고 있습니다。

저는 파란색 왼쪽 경계를 가지고 있습니다。

CSS 경계 스타일

border-style 속성은 표시되는 경계 스타일을 지정합니다。

다음 값들이 허용됩니다：

  • dotted - 점선 경계 정의
  • dashed - 가시선 경계 정의
  • solid - 실선 경계 정의
  • double - 양쪽 경계 정의
  • groove - 3D 그로브 경계 정의。 효과는 border-color 값에 따라 달라집니다
  • ridge - 3D 라이드 경계 정의。 효과는 border-color 값에 따라 달라집니다
  • inset - 3D inset 경계 정의。 효과는 border-color 값에 따라 달라집니다
  • outset - 3D outset 경계 정의。 효과는 border-color 값에 따라 달라집니다
  • none - 경계 없음 정의
  • hidden - 숨기는 경계 정의

border-style 속성은 상단 경계, 오른쪽 경계, 하단 경계, 왼쪽 경계에 사용되는 하나에서 네 개의 값을 설정할 수 있습니다。

예제

다양한 경계 스타일을 보여줍니다：

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

결과:

점점 테두리.

점선 테두리.

단선 테두리.

양선 테두리.

함박 테두리. 효과는 border-color의 값에 따라 다릅니다.

봉합 테두리. 효과는 border-color의 값에 따라 다릅니다.

3D inset 테두리. 효과는 border-color의 값에 따라 다릅니다.

3D outset 테두리. 효과는 border-color의 값에 따라 다릅니다.

테두리 없음.

테두리 숨기기.

혼합 테두리.

직접 시도해 보세요

주의:설정되지 않았다면 border-style 속성이 설정되지 않으면, 다음 장에서 자세히 설명할 다른 CSS 테두리 속성은 어떤 효과도 가지지 않습니다!