테두리 관련 CSS - border-width / border-color

테두리 관련 CSS - border-width 속성

• border-width 속성은 박스 모델에서 테두리의 두께를 지정할 때 사용합니다.
• border-width : < 크기 > / thin / medium / thick
  border-top-width : < 크기 > / thin / medium / thick
  border-right-width : < 크기 > / thin / medium / thick
  border-bottom-width : < 크기 > / thin / medium / thick
  border-left-width : < 크기 > / thin / medium / thick
• 테두리를 지정할 때 1px나 5px처럼 크기를 직접 입력할 수도 있고 thin, medium, thick 같은 키워드 중에서 하나를 선택할 수도 있습니다.
• border-width 속성을 이용해 한꺼번에 표시할 때 속성 값이 2개라면 위아래와 좌우를 묶어 지정하고 4개라면 시계 방향(top-right-bottom-left)으로 적용합니다.

border-width :2px;

border-width : thick thin;

border-width : 5px 10px 15px 20px;

테두리 관련 CSS - border-color 속성

• border-color 속성은 박스 모델에서 테두리 색상을 지정할 때 사용합니다.
• 기본형 : border-color : < 색상 >
  border-top-color : < 색상 >
  border-right-color : < 색상 >
  border-bottom-color : < 색상 >
  border-left-color : < 색상 >
• 박스 모델의 테두리를 지정할 때 border-color 속성만 사용해서는 화면에서 결과를 확인할 수 없고 border-width 속성과 border-style 속성을 이용해 미리 테두리 두께와 스타일을 결정해야 합니다.

border-color : red;

border-color : blue;