CSS 경계선 각쪽

CSS 테두리 - 단일 테두리

이전 장의 예제에서는 각 쪽에 다른 테두리를 지정할 수 있다는 것을 보았습니다.

CSS에서는 각 테두리(상단, 오른쪽, 하단, 왼쪽)를 지정할 수 있는 몇 가지 속성이 있습니다：

예제

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

결과：

다른 테두리 스타일

본인이 직접 시도해보세요

다른 테두리 스타일

위 예제의 결과는 이와 같습니다：

예제

p {
  border-style: dotted solid;
}

본인이 직접 시도해보세요

그 작동 원리는 이렇습니다：

만약 border-style 속성은 네 가지 값을 설정합니다：

border-style: dotted solid double dashed;

  • 상단 테두리는 가시선선입니다
  • 오른쪽 테두리는 실선입니다
  • 하단 테두리는 양변선입니다
  • 왼쪽 테두리는 가시선선입니다

만약 border-style 속성은 세 가지 값을 설정합니다：

border-style: dotted solid double;

  • 상단 테두리는 가시선선입니다
  • 오른쪽과 왼쪽 테두리는 실선
  • 하단 테두리는 양변선입니다

만약 border-style 속성을 두 가지 값으로 설정하면:

border-style: dotted solid;

  • 위쪽과 아래쪽 테두리는 가려진 선
  • 오른쪽과 왼쪽 테두리는 실선

만약 border-style 속성을 하나의 값으로 설정하면:

border-style: dotted;

  • 네 가지 모두 가려진 선

예제

/* 네 가지 값 */
p {
  border-style: dotted solid double dashed; 
}
/* 세 가지 값 */
p {
  border-style: dotted solid double; 
}
/* 두 가지 값 */
p {
  border-style: dotted solid; 
}
/* 하나의 값 */
p {
  border-style: dotted; 
}

본인이 직접 시도해보세요

예제에서 사용된 것은 border-style 속성. 하지만 border-width 과 border-color 도 마찬가지로 적용됩니다.