border
Last updated
Last updated
border 속성은 대상의 테두리를 설정한다.
위와 같이 설정하면 대상 태그의 테두리가 1px 두께의 black(검정) solid(직선) 형태로 생성된다.
border는 각각의 속성들을 따로 설정할 수 있다.
border-width를 이용하여 테두리의 두께를 설정할 수 있다. 적용 가능한 크기 규칙은 다음 문서를 확인한다.
크기(size)두께를 하나만 설정하면 모든 테두리에 적용된다.
두께를 두 개 설정하면 먼저 설정한 두께가 상단과 하단 테두리에, 나중에 설정한 두께가 좌측과 우측 테두리에 설정된다.
두께를 세 개 설정하면 먼저 설정한 두께가 상단 테두리에, 두 번째 설정한 테두리가 좌측과 우측 테두리에, 마지막에 설정한 테두리가 하단 테두리에 설정된다.
두께를 네 개 설정하면 먼저 설정한 두께가 상단 테두리에 설정되며, 이후에 설정된 두께부터는 시계 방향으로 설정된다.
다음 세부 속성으로도 두께를 설정할 수 있다.
border-top-width : 상단 테두리 두께
border-bottom-width : 하단 테두리 두께
border-left-width : 좌측 테두리 두께
border-right-width : 우측 테두리 두
border-color를 이용하여 테두리의 색상을 설정할 수 있다. 적용 가능한 색상의 키워드 및 규칙은 다음 문서를 확인한다.
색상을 하나만 설정하면 전체 테두리에 설정된다.
색상을 두 개 설정하면 먼저 설정한 색상이 상단과 하단 테두리에, 나중에 설정한 색상이 좌측과 우측 테두리에 설정된다.
색상을 세 개 설정하면 먼저 설정한 색상이 상단 테두리에 설정되며, 두 번째 설정한 색상이 좌측과 우측 테두리에 설정되고, 마지막에 설정한 색상이 하단 테두리에 설정된다.
색상을 네 개 설정하면 먼저 설정한 색상이 상단 테두리에 설정되며, 이후에 설정한 색상부터는 시계 방향으로 설정된다.
다음 세부 속성으로도 색상을 설정할 수 있다.
border-top-color - 상단 테두리 색상
border-bottom-color - 하단 테두리 색상
border-left-color - 좌측 테두리 색상
border-right-color - 우측 테두리 색상
border-style을 이용하여 테두리의 스타일을 지정할 수 있다. 여러 가지의 종류가 각각 키워드로 지정되어 있다.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-radius 속성으로 모서리의 둥근 정도를 설정할 수 있다.
크기를 지정하거나 비율로 설정할 수 있다.
크기를 하나만 설정할 경우 모든 모서리에 동일한 값이 설정된다.
크기를 두 개 설정할 경우 좌측 상단과 우측 하단 / 좌측 하단과 우측 상단 으로 구분하여 설정할 수 있다.
크기를 네 개 설정할 경우 좌측 상단부터 시계 방향으로 구분하여 설정할 수 있다.