[CSS] text에 테두리(border) 넣기

 

 

html
<div>
  <h2>Text Border Test</h2> 
</div>

위의 HTML 코드를 기준으로 CSS를 이용한 텍스트에 외곽선 효과를 주는 방법을 소개하겠습니다.

 

-webikit-text-stroke

css
h2 {
  -webkit-text-stroke: 2px red;
}

해당 방법은 표준적인 방법이 아니기에 지원하지 않는 브라우저가 존재할 수 있습니다.

하지만 text-stroke라는 속성을 이용해 단순한 width, color 지정으로 테두리를 넣을 수 있습니다.

 

text-stroke는 width가 커질수록 바깥쪽으로 두꺼워지는 것이 아니기에 특정 수치에서는 글자를 먹어버립니다.

 

text-shadow

css
h2 {
  text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
}

해당 방법은 text-shadow를 번짐 없이 사방에 둘러, 마치 테두리 스타일을 먹인 것 같은 효과를 내는 방법입니다.

 

text-shadow 속성(순서대로 x축, y축, 색상 )은 콤마(,)로 중첩 사용이 가능한 점을 이용한 것입니다.

 

예제 코드