CSS의 border-image-repeat 속성은 요소 테두리에 적용된 이미지가 테두리 영역을 어떤 방식으로 채울지 결정합니다. 이 속성을 활용하면 테두리 이미지를 늘리거나(stretch), 타일처럼 반복하거나(repeat), 잘림 없이 둥글게 배치(round)하는 등 다양한 스타일을 만들 수 있습니다.
주요 속성값
- stretch (기본값) : 테두리 이미지를 늘려서 영역 전체를 채웁니다.
- repeat : 이미지를 타일 형태로 반복 배치하며, 남는 부분은 가장자리에서 잘려나갈 수 있습니다.
- round : 이미지를 반복 배치하되, 잘리지 않도록 이미지 크기를 자동으로 조절합니다.
- space : 이미지 원본 크기는 유지하고, 이미지 사이에 균등한 간격을 두어 배치합니다.
예제
아래 코드를 실행하면 border-image-repeat 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다 −
<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;
border-image-width: 10px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image border example.</p>
</body>
</html>
코드 설명 : 위 예제에서는 15px의 투명한 테두리를 먼저 지정하고, border-image-source로 사용할 이미지를 불러옵니다. border-image-slice: 50은 이미지를 나눌 기준선을 정하고, border-image-width: 10px로 테두리 두께를 조절합니다. 마지막으로 border-image-repeat: round를 적용해 이미지가 잘리지 않고 매끄럽게 반복되도록 설정했습니다.