CSS의 border-image 속성을 사용하면 단색 테두리 대신 이미지를 요소의 테두리로 지정할 수 있습니다. 이 속성은 테두리 이미지의 소스, 잘라내기 방식, 반복 패턴, 너비 등을 세밀하게 제어할 수 있어 독특하고 개성 있는 디자인을 구현할 때 매우 유용합니다.
border-image의 주요 하위 속성
- border-image-source: 테두리로 사용할 이미지 파일의 경로(url)를 지정합니다.
- border-image-slice: 이미지를 어떤 크기로 잘라내어 테두리에 배치할지 지정합니다.
- border-image-width: 테두리 이미지의 두께(너비)를 지정합니다.
- border-image-repeat: 이미지가 테두리 영역을 채우는 방식(round, repeat, stretch 등)을 결정합니다.
예제
다음 코드를 실행하면 세 개의 문단에 서로 다른 두께의 이미지 테두리가 적용되는 것을 확인할 수 있습니다.
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">이미지 테두리 예제입니다.</p>
<p id = "borderimg2">이미지 테두리 예제입니다.</p>
<p id = "borderimg3">이미지 테두리 예제입니다.</p>
</body>
</html>코드 설명
위 예제에서는 세 요소 모두 동일한 이미지(border.png)와 border-image-slice: 30 값을 사용합니다. 차이점은 border-image-width 값뿐인데, 각각 10px, 20px, 30px로 설정되어 있어 화면에서 테두리 두께가 점점 굵어지는 것을 비교해 볼 수 있습니다.
또한 border: 10px solid transparent처럼 투명한 기본 테두리를 먼저 선언해야 이미지 테두리가 정상적으로 표시되며, padding은 내용과 테두리 사이의 여백을 확보하는 역할을 합니다.