Border Image

참고. border-image.com

미리 정리하기

border-width

border-width 프로퍼티는 테두리의 두께를 제어하는 데 사용한다. 이 프로퍼티의 값은 픽셀 단위로 지정하거나 다음 값 중에 하나를 사용할 수 있다.
thin, medium, thick
(border-width 프로퍼티는 퍼센트를 사용할 수 없다.)

또한 다음 네 개의 프로퍼티르 ㄹ사용하여 테두리 네 변의 두께를 개별적으로 제어할 수 있다.
border-top-width
border-right-width
border-bottom-width
border-left-width

그리고 다음과 같이 네 개의 테두리 값에 대해 각기 다른 두께를 하나의 프로퍼티에 지정할 수 있다.
border-width:2px 1px 1px 2px
값의 순서는 시계방향이다.



border-style

border-style을 사용하여 테두리의 스타일을 제어할 수 있다. border-style 프로퍼티에 설정할 수 있는 값은 다음과 같다.

solid 실선
dotted 점선(테두리의 너비가 2px이면, 점은 각 면의 길이가 2px인 정사각형이 되고 점 간의 간격은 2px이 된다.)
dashed 긴 점선
double 이중선
groove 움푹 들어간 입체적인 선
ridge 앞으로 튀어나온 입체적인 선
inset 박스 전체가 움푹 들어간 입체적인 선
outset 박스 전체가 앞으로 튀어 나온 입체적인 선
hidden / none 테두리 숨기기

다음을 사용하여 테두리의 스타일을 개별적으로 변경할 수 있다.
border-top-style
border-left-style
border-right-style
border-bottom-style