테두리는 텍스트 단락뿐만 아니라 그림이나 표, 양식 등 사각 형태를 가진 어떤 요소에나 다양하게 적용할 수 있음.
테두리와 관련된 속성에는 테두리 두께, 테두리 스타일, 테두리 색상 등이 있음.
- border-style 속성 : 테두리 스타일 지정하기
- 기본 값 : none
- 테두리 스타일을 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않음.
- 테두리를 그리기 위해서는 맨 먼저 테두리 스타일을 지정해야 함.
border-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid
-
- none : 테두리가 나타나지 않음. 기본 값임.
- hidden : 테두리가 나타나지 않음. border-collapse:collapse일 경우, 다른 테두리도 표시되지 않음
- dashed : 테두리를 짧은 선(직전으로 된 점선)으로 표시함
- dotted : 테두리를 점선으로 표시함
- double : 이중선(겹선)으로 표시함. 두 선 사이의 간격은 border-width 값으로 지정함
- groove : 테두리를 창에 조각한 것처럼 표시함. 홈이 파인 듯 입체적으로 보임
- inset : border-collapse:separate일 경우, 전체 박스 테두리가 창에 박혀 있는 것처럼 표시되고 / border-collapse:collapse 일 경우, groove와 똑같이 표시됨.
- outset : border-collapse:separate일 경우, 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고 / border-collapse:collapse 일 경우, ridge와 똑같이 표시됨.
- ridge : 테두리를 창에서 튀어나온 것처럼 표시함.
- solid : 테두리를 실선으로 표시함.
border-style:none
border-style:hidden
border-style:dashed
border-style:dotted
border-style:double
border-style:groove
border-style:inset
border-style:outset
border-style:ridge
border-style:solid
- border-width 속성 : 테두리 두께 지정하기
border-top(right | bottom | left)-width : <크기> | thin | medium | thick
border-width : <크기> | thin | medium | thick
- border-color 속성 : 테두리 색상 지정하기
border-top(right | bottom | left)-color : <색상>
border-color : <색상>
- border 속성 : 테두리 스타일 묶어 지정하기
border-top(right | bottom | left) : <두께> <색상> <스타일>
border : <두께> <색상> <스타일>
- border-radius 속성 : 박스 모서리 둥글기 만들기
border-top-left(right)-radius : <크기> | <백분율>
border-bottom-right(left)-radius : <크기> | <백분율>
border-radius : <크기> | <백분율>
border-radius: 20px;
border-radius: 20px 70px;
border-top-left-radius: 100px 50px;
border-bottom right-radius: 50% 30%;
- box-shadow 속성 : 선택한 요소에 그림자 효과 내기
box-shadow : none | <수평거리><수직거리><흐림정도><번짐정도><색상> inset(안쪽 그림자)
border-radius: 20px;
border-radius: 20px 70px;
border-top-left-radius: 100px 50px;
border-bottom right-radius: 50% 30%;