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