border 속성은 테두리 효과를 정의하는데 사용됩니다.
| 속성 | 설명 |
|---|---|
| border-style | 테두리의 표시 방식을 지정합니다. |
| border-width | 테두리의 두께를 지정합니다. |
| border-color | 테두리의 색상을 지정합니다. |
| border | 테두리의 속성을 일괄 적용할때 사용합니다. |
| border-radius | 테두리의 모서리를 둥글게 지정합니다. |
border-style: value|initial|inherit;테두리의 표시 방식을 지정합니다.
| none | 기본값, 테투리 표시하지 않음 |
| hidden | |
| dotted | 점선 |
| dashed | 대시 |
| solid | 실선 |
| double | 이중 실선 |
| groove | 오목한 선 |
| ridge | 볼록한 선 |
| inset | 안으로 들어가 보이는 형태(버튼 눌림) |
| outset | 위로 튀어나와 보이는 형태(버튼) |
각각 방향 별로 지정하는 속성이 있습니다.
border-width: medium|thin|thick|length|initial|inherit;
테두리의 두께를 지정합니다.
border-style 속성이 지정되어 있어야 합니다.
| thin | 얇은 굵기 |
| medium | 기본값, 중간 굵기 |
| thick | 굵은 굵기 |
| length | 단위로 두께를 직접 지정 border-width:10px; |
각각 방향 별로 지정하는 속성이 있습니다.
border-color: color|transparent|initial|inherit;
테두리의 색상을 지정합니다.
border-style 속성이 지정되어 있어야 합니다.
기본값은 black 입니다.
transparent는 투명한 색상을 칠합니다.
각각 방향 별로 지정하는 속성이 있습니다.
border: border-width border-style border-color|initial|inherit;border-style은 필수 입력입니다. 각각 방향 별로 지정하는 속성이 있습니다.
border: border-width border-style border-color|initial|inherit;테두리의 모서리를 둥글게 지정합니다. 각각 방향 별로 지정하는 속성이 있습니다.