Properties

Properties

  • account_tree
  • bug_report

Borders

요소에게 테두리를 만들기 위한 기술적인 주제를 다룬다.

개요

요소에게 테두리를 만들기 위한 기술적인 주제를 다룬다. 테두리가 갖는 디자인적인 성질은 선의 두께, 종류, 색상이다. 이러한 성질을 갖는 테두리를 요소의 상하좌우 전체 또는 선택적으로 지정할 수 있다.

Backgrounds와 Borders에 대한 기술적인 내용은 CSS Backgrounds and Borders Modules에 통합되어 있으나 효과적인 분류 차원에서 이 섹션에서는 테두리와 관련된 속성들로만 구성되어 있다.

특이할 점은 CSS 2에서는 물리적인 방향만을 지원했으나 CSS Logical Properties and Values Module이 생기면서 논리적인 방향을 다루는 속성들이 추가되었다. 논리적인 방향으로 박스의 가장자리 디자인이 필요한 경우에는 Logical Properties and Values 분류를 확인하기 바란다.

관련 속성

  • border

    요소의 상하좌우 테두리의 두께, 모양, 색상을 한 번에 설정하는 속기 속성이다.
  • border-bottom

    요소 하단 테두리의 두께, 모양, 색상 속성을 한번에 설정하는 속기 속성이다.
  • border-bottom-color

    요소의 아래쪽 테두리의 색상을 설정한다.
  • border-bottom-left-radius

    요소의 하단 왼쪽의 모서리에 대한 둥글기 처리를 할 수 있다.
  • border-bottom-right-radius

    요소의 하단 오른쪽의 모서리에 대한 둥글기 처리를 할 수 있다.
  • border-bottom-style

    요소의 하단 테두리의 모양을 설정한다.
  • border-bottom-width

    요소의 하단 테두리의 두께를 설정한다.
  • border-color

    요소의 테두리의 색상을 설정한다.
  • border-image

    요소의 테두리를 이미지를 이용하여 생성하는 관련 속성을 한번에 설정할 수 있는 속기 속성이다.
  • border-image-outset

    테두리에 적용된 이미지의 영역이 요소의 테두리 영역을 넘어 확장되는 크기를 설정한다.
  • border-image-repeat

    요소의 네 변 테두리에 이미지를 어떻게 반복적으로 적용할 지를 결정한다.
  • border-image-slice

    요소의 테두리에 적용될 이미지의 범위를 요소의 방향에 따라 좌표, 비율로 설정한다.
  • border-image-source

    요소의 테두리에 적용될 이미지를 설정한다.
  • border-image-width

    테두리 이미지의 너비를 지정한다.
  • border-left

    요소의 왼쪽 테두리의 두께, 모양, 색상 속성을 한번에 설정하는 속기 속성이다.
  • border-left-color

    요소의 왼쪽 테두리의 색상을 설정한다.
  • border-left-style

    요소의 왼쪽 테두리의 모양을 설정한다.
  • border-left-width

    요소의 왼쪽 테두리의 두께를 설정한다.
  • border-radius

    요소의 모서리를 둥글게 처리한다.
  • border-right

    요소의 오른쪽 테두리의 두께, 모양, 색상 속성을 한번에 설정하는 속기 속성이다.
  • border-right-color

    요소의 오른쪽 테두리의 색상을 설정한다.
  • border-right-style

    요소의 오른쪽 테두리의 모양을 설정한다.
  • border-right-width

    요소의 오른쪽 테두리의 두께를 설정한다.
  • border-style

    요소의 테두리의 모양을 설정한다.
  • border-top

    요소의 상단 테두리의 두께, 모양, 색상 속성을 한번에 설정하는 속기 속성이다.
  • border-top-color

    요소의 위쪽 테두리의 색상을 설정한다.
  • border-top-left-radius

    요소의 상단 왼쪽의 모서리에 대한 둥글기 처리를 할 수 있다.
  • border-top-right-radius

    요소의 상단 오른쪽의 모서리에 대한 둥글기 처리를 할 수 있다.
  • border-top-style

    요소의 상단 테두리의 모양을 설정한다.
  • border-top-width

    요소의 상단 테두리의 두께를 설정한다.
  • border-width

    요소의 테두리의 두께를 설정한다.
  • box-shadow

    요소에게 그림자를 적용한다.

W3C Modules