[CSS] border

요소의 테두리 선을 지정하는 단축 속성이다.

테두리 선의 두께가 늘어날수록 요소의 크기가 커진다.

 

border-width

요소 테두리 선의 두께를 의미한다.

 

- 기본값: medium

- 단위: px, em, % 등 단위로 지정

- thin(얇은 두께), thick(두꺼운 두께) 값이 있지만 잘 사용하지 않는다.

- border 라는 단축 속성의 개별 속성이면서 각 방향별로 한 번에 적용 가능한 단축 속성이다.

.item {
  border-width: 10px 20px 30px 40px;
}

border-style

요소 테두리 선의 종류를 의미한다.

 

- 기본값: none (선 없음)

- solid: 실선 (일반 선)

- dotted: 점선 (....)

- dashed: 파선 (- - - -)

- double: 두 줄 선

- groove: 홈이 파여있는 모양

- ridge: 솟은 모양 (groove 의 반대)

- inset: 요소 전체가 들어간 모양

- outset: 요소 전체가 나온 모양

 

border-color

요소 테두리 선의 색상을 지정하는 단축 속성을 의미한다.

 

- 기본값: black

- 색상: 선의 색상

- transparent: 투명

.item {
  border-color: black white orange yellow;
}

 

단축 속성 예시

.item {
  border: medium none black;
}

border-width, border-style, border-color 각각의 기본값을 단축 속성으로 사용한 것이다.

선의 종류가 none 이기 때문에 출력되지 않는다.

 

.item {
  border: 1px solid orange;
}

 

기타 속성

요소의 테두리 선을 지정하는 기타 속성들이다.

방향 별로 세밀하게 속성들을 설정할 수 있다.

border-방향: 두께 종류 색상;
border-방향-width: 두께;
border-방향-style: 종류;
border-방향-color: 색상;

 

border-radius

요소의 모서리를 둥글게 깎는 것을 의미한다.

 

- 기본값: 0 (둥글게 없음)

- 단위: px, em, vw 등 단위로 지정

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 10px;
}

해당 요소의 각 모서리에 반지름이 10px 인 동그라미(정 원)을 배치한 후,

요소에서 동그라미를 벗어나는 부분을 삭제하는 원리이다.

 

border-radius: 0 10px 0 0;

왼쪽 위 - 오른쪽 위 - 오른쪽 아래 - 왼쪽 아래 의 시계방향 순서로 적용할 수 있다.