border: 0; 과 border: none;의 차이

border 속성은 세 개의 값을 가집니다. 

정확히는 3개의 속성을 축약해서 쓰는 것이죠.

border: 선 두께, 선 모양, 선 색깔 (ex. border: 1px solid black)

---

border: 0

[사진 1] border: 0;

[사진 1]
그러므로, border: 0; 은 border: 0 0 0; 으로 선언된 상태인 터라

border: 0;
border-style: dotted;

를 선언하면, 캐스케이딩 규칙을 따라, border: 0 dotted 0; 이 됩니다. 그런데, 선 모양 자체는 있어도 선의 두께가 0이므로 그려지지 않습니다.

---

border: none;

[사진 2] border: none;

[사진 2]
반면, border: none;은 border: none none none; 으로 선언된 것과 같습니다.

none의 뜻은 '지정한 값이 없음'이라고 이해하시면 됩니다. 즉, border의 속성값이 모두 지정하지 않은 상태이므로 '기본값'으로 선언된 상태라고 얘기할 수 있죠.

border: none;
border-style: dotted;

다음과 같이 선언하면, 캐드스케이딩 규칙에 의해 border: none dotted none; 이 됩니다. 이렇게 하면 검은색 선의 테두리가 그려진 모양이 나옵니다.

 

1번의 결과와 다른 것을 확인할 수 있습니다.

즉, none으로 값을 주면 기본값이 적용된다는 사실을 발견할 수 있습니다.

---

결론부터 작성

border: none; 일 경우,

선의 모양(border-style의 값)이 있어야 border가 활성화된다. 나머지 none은 기본값으로 나타난다.
기본값

• border-width: medium;
• border-color: black;

 

test 1) border: 10px none none;

border: none;
border-width: 10px;

=> 선의 모양 자체 기본값이 '0(없음)'이므로 박스가 그려지지 않는다.

 

test 2) border: none none red;

border: none;
border-color: red;

=> 선의 모양 자체 기본값이 '0(없음)'이므로 박스가 그려지지 않는다.

 

test 3) border: 10px none red;

border: none;
border-width: 10px;
border-color: red;

=> 선의 모양 자체 기본값이 '0(없음)'이므로 박스가 그려지지 않는다.