CSS border-image-source 속성이란?
CSS의 border-image-source 속성은 요소의 테두리를 일반적인 실선 대신 이미지로 꾸미기 위해 해당 이미지의 경로(URL)를 지정하는 속성입니다. 이 속성은 border-image-slice, border-image-repeat 등 다른 border-image 관련 속성들과 함께 사용되며, 이미지를 불러올 수 없는 경우에는 border-style에 설정된 기본 테두리가 대신 표시됩니다.
사용 예제
아래 코드를 실행하면 border-image-source 속성을 활용해 이미지 테두리를 구현하는 결과를 직접 확인할 수 있습니다.
<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;
border-image-slice: 50;
}
</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(...); — 테두리로 사용할 이미지 파일의 경로를 지정합니다.
- border-image-repeat: round; — 이미지 조각들이 테두리 전체 영역에 빈틈없이 반복 배치되도록 하며, 필요에 따라 크기가 자동으로 조절됩니다.
- border-image-slice: 50; — 원본 이미지를 어떤 크기로 잘라내어 테두리에 적용할지 픽셀 또는 백분율 값으로 지정합니다.
브라우저 호환성 참고
border-image-source 속성은 Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 안정적으로 지원됩니다. 다만 구버전 브라우저에서는 동작하지 않을 수 있으므로, 폭넓은 호환성이 필요한 프로젝트에서는 @supports 규칙을 활용해 대체 스타일을 함께 준비하는 것이 좋습니다.