테두리(border)는 텍스트 단락 뿐만아니라 그림이나 표, 사진, 양식 등 사각 형태를
가진 어떤 요소에나 다양하게 적용할 수 있습니다. 테두리와 관련된 속성에는
테두리 두께, 테두리 스타일, 테두리 색상 등이 있습니다.
하나씩 살펴 보면서 박스 모델의 테두리를 꾸며 보겠습니다.
border
- border는 테두리를 만드는 속성입니다.
- 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다.
기본형
border : border-width | border-style | border-color
- border-width : 선의 두께를 정합니다.
- border-style : 선의 모양을 정합니다.
- border-color : 선의 색을 정합니다.
border-width
border-width 속성에는 다음의 값을 넣을 수 있습니다.
medium | thick | thin | length
1px나 5px처럼 크기를 직접 입력 할 수도 있습니다.
border-style
border-style 속성에는 다음의 값을 넣을 수 있습니다.
dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid
속성 값에 따라 어떤 테두리가 나타나는지 확인하려면 여기를 참고해주세요.
예제
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.