border

border

border 속성은 대상의 테두리를 설정한다.

위와 같이 설정하면 대상 태그의 테두리가 1px 두께의 black(검정) solid(직선) 형태로 생성된다.

border는 각각의 속성들을 따로 설정할 수 있다.

border-width:1px;
border-style:solid;
border-color:black;

border-width

border-width를 이용하여 테두리의 두께를 설정할 수 있다. 적용 가능한 크기 규칙은 다음 문서를 확인한다.

page크기(size)

• 두께를 하나만 설정하면 모든 테두리에 적용된다.

• 두께를 두 개 설정하면 먼저 설정한 두께가 상단과 하단 테두리에, 나중에 설정한 두께가 좌측과 우측 테두리에 설정된다.

• 두께를 세 개 설정하면 먼저 설정한 두께가 상단 테두리에, 두 번째 설정한 테두리가 좌측과 우측 테두리에, 마지막에 설정한 테두리가 하단 테두리에 설정된다.

• 두께를 네 개 설정하면 먼저 설정한 두께가 상단 테두리에 설정되며, 이후에 설정된 두께부터는 시계 방향으로 설정된다.

• 다음 세부 속성으로도 두께를 설정할 수 있다.

  • border-top-width : 상단 테두리 두께

  • border-bottom-width : 하단 테두리 두께

  • border-left-width : 좌측 테두리 두께

  • border-right-width : 우측 테두리 두

border-color

border-color를 이용하여 테두리의 색상을 설정할 수 있다. 적용 가능한 색상의 키워드 및 규칙은 다음 문서를 확인한다.

page색상(color)

• 색상을 하나만 설정하면 전체 테두리에 설정된다.

• 색상을 두 개 설정하면 먼저 설정한 색상이 상단과 하단 테두리에, 나중에 설정한 색상이 좌측과 우측 테두리에 설정된다.

• 색상을 세 개 설정하면 먼저 설정한 색상이 상단 테두리에 설정되며, 두 번째 설정한 색상이 좌측과 우측 테두리에 설정되고, 마지막에 설정한 색상이 하단 테두리에 설정된다.

• 색상을 네 개 설정하면 먼저 설정한 색상이 상단 테두리에 설정되며, 이후에 설정한 색상부터는 시계 방향으로 설정된다.

• 다음 세부 속성으로도 색상을 설정할 수 있다.

  • border-top-color - 상단 테두리 색상

  • border-bottom-color - 하단 테두리 색상

  • border-left-color - 좌측 테두리 색상

  • border-right-color - 우측 테두리 색상

border-style

border-style을 이용하여 테두리의 스타일을 지정할 수 있다. 여러 가지의 종류가 각각 키워드로 지정되어 있다.

• none

• hidden

• dotted

• dashed

• solid

• double

• groove

• ridge

• inset

• outset

border-radius

border-radius 속성으로 모서리의 둥근 정도를 설정할 수 있다.

크기를 지정하거나 비율로 설정할 수 있다.

크기를 하나만 설정할 경우 모든 모서리에 동일한 값이 설정된다.

/* 모든 모서리를 5px만큼 둥글게 설정*/
border-radius: 5px;

크기를 두 개 설정할 경우 좌측 상단과 우측 하단 / 좌측 하단과 우측 상단 으로 구분하여 설정할 수 있다.

/* 좌측상단과 우측하단을 10px, 좌측하단과 우측상단을 15px만큼 둥글게 설정*/
border-radius:10px 15px;

크기를 네 개 설정할 경우 좌측 상단부터 시계 방향으로 구분하여 설정할 수 있다.

/* 좌측상단 5px, 우측상단 10px, 우측하단 15px, 좌측하단 20px만큼 모서리 둥글게 설정*/
border-radius: 5px 10px 15px 20px;