CSS border-image-source 속성으로 이미지 경로 설정하는 방법

CSS에서 border-image-source 속성은 요소의 테두리에 사용할 이미지의 경로를 지정할 때 사용됩니다. 이 속성에 이미지 URL을 값으로 지정하면, 일반적인 단색 테두리 대신 원하는 이미지가 테두리를 장식하게 됩니다.

예제

아래 코드를 실행하면 이미지 경로를 설정해 테두리 이미지를 적용한 결과를 직접 확인할 수 있습니다.

<html>
   <head>
      <style>
         #borderimg1 {
            border: 15px solid transparent;
            padding: 15px;
            border-image-source: url(https://tutorialspoint.com/css/images/border.png);
            border-image-repeat: round;
         }
      </style>
   </head>
   
   <body>
      <p id = "borderimg1">This is image border example.</p>
   </body>
</html>

코드 설명

border: 15px solid transparent; — 테두리 영역을 15px 두께로 생성하고, 배경 이미지가 보이도록 투명하게 설정합니다.
padding: 15px; — 콘텐츠와 테두리 사이에 여백을 추가합니다.
border-image-source: url(...); — 테두리로 사용할 이미지의 경로(URL)를 지정합니다.
border-image-repeat: round; — 이미지가 테두리 전체를 자연스럽게 채우도록 반복 배치합니다.

이처럼 border-image-source 속성과 관련 속성들을 함께 사용하면, 단조로운 실선 테두리 대신 개성 있는 이미지 테두리를 손쉽게 구현할 수 있습니다.