CSS의 border-image 속성은 요소의 테두리를 단색 선 대신 이미지로 꾸밀 수 있게 해주는 기능입니다. 이 속성을 활용하면 버튼, 카드, 알림 상자 등 다양한 UI 요소에 개성 있는 장식용 테두리를 손쉽게 적용할 수 있습니다.
border-image 속성의 기본 원리
border-image 속성을 사용하려면 먼저 border 속성으로 테두리 영역을 확보해야 합니다. 이때 테두리 색상은 transparent(투명)로 지정하는 것이 일반적입니다. 그다음 border-image 값에 사용할 이미지 URL과 슬라이스(slice) 크기, 반복 방식(repeat)을 순서대로 지정하면 됩니다.
예제 코드
<html>
<head>
<style>
#borderimg1 {
border: 15px solid transparent;
padding: 15px;
border-image: url(https://tutorialspoint.com/css/images/border.png) 50 round;
}
</style>
</head>
<body>
<p id = "borderimg1">이미지 테두리 예제입니다.</p>
</body>
</html>
코드 설명
- border: 15px solid transparent; – 15px 두께의 투명한 테두리 공간을 만들어 이미지가 들어갈 자리를 확보합니다.
- padding: 15px; – 내용과 테두리 사이에 여백을 두어 가독성을 높입니다.
- border-image: url(...) 50 round; – 지정한 이미지를 테두리로 사용하며, 50은 이미지를 나누는 슬라이스 크기, round는 이미지 조각이 잘리지 않도록 크기를 조절하며 반복 배치하는 방식입니다.
테두리 이미지 반복 방식(repeat) 주요 값
테두리 이미지가 채워지는 방식은 마지막 키워드로 결정되며, 상황에 맞게 선택할 수 있습니다.
- stretch – 기본값. 이미지 조각을 늘려서 테두리 전체를 채웁니다.
- repeat – 이미지 조각을 원본 크기 그대로 반복하며, 끝부분이 잘릴 수 있습니다.
- round – 이미지 조각이 잘리지 않도록 크기를 자동으로 조절하며 반복합니다.
- space – 이미지 조각 사이에 균등한 간격을 두고 반복 배치합니다.
이처럼 border-image 속성을 활용하면 별도의 이미지 편집 없이도 CSS만으로 세련되고 독특한 테두리 디자인을 구현할 수 있습니다.