(CSS) 0.5px border를 출력해보자

크롬에서 볼 수 없는 0.5 px, 어떻게 출력할까

border: 1px solid #ccc;

웹 퍼블리싱을 마치고 디자인을 검토하다보면 디자이너 분이 “ 버튼 이거보다 얇아야 하는데” 라고 하신다. 하지만 chrome에서는 1px보다 얇게 주는것이 아직 불가능하다.(나중에 지원해줄지는 모르겠지만....)

이럴 때 사용할 수 있는 3가지 트릭이 있는데

1.안된다고 설득하기(는 넘어가도록 하자!)

2. 투명도를 이용하기(RGBA 의 Alpha)

html code를 이렇게 주고

style을 이렇게 주면

얇아진 것 같나요? 흠………네

3. border-image를 이용하기

transparent image 와 border-image 속성을 이용해서 얇게 나타낼 수 있다.

(이미지 구해서 해보고 나중에 업데이트 필요)