CSS 테두리 이미지란?
웹 디자인에서 단조로운 실선 테두리 대신 이미지를 활용해 개성 있는 테두리를 만들고 싶다면 border-image 속성을 사용하면 됩니다. 이 속성을 활용하면 하나의 이미지를 요소의 테두리 영역에 자연스럽게 늘리거나 반복 배치할 수 있어, 버튼·카드·배너 등 다양한 UI 요소에 독특한 시각 효과를 손쉽게 적용할 수 있습니다.
border-image 속성의 기본 문법
border-image 속성은 아래와 같은 형태로 작성합니다.
border-image: url(이미지 경로) 슬라이스 값 반복 방식;
- url() : 테두리로 사용할 이미지의 경로를 지정합니다.
- 슬라이스 값 : 이미지를 어떻게 잘라낼지 픽셀(px) 또는 백분율(%) 단위로 지정합니다.
- 반복 방식 : round(반복), stretch(늘리기), repeat 등 이미지가 테두리에 채워지는 방식을 결정합니다.
예제 코드
다음은 border-image 속성을 사용해 서로 다른 슬라이스 값으로 테두리 이미지를 적용하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.border1 {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://i.picsum.photos/id/677/200/300.jpg") 30 round;
}
.border2 {
border: 10px solid transparent;
padding: 15px;
border-image: url("https://i.picsum.photos/id/677/200/300.jpg") 2% round;
}
</style>
</head>
<body>
<h1>Border image in CSS</h1>
<p class="border1">Some random sample text inside the paragraph</p>
<p class="border2">Some random sample text inside the paragraph</p>
</body>
</html>
코드 설명
border: 10px solid transparent;: 테두리 영역을 10px 확보하고 색상을 투명으로 지정하여, 그 자리에 이미지가 표시되도록 합니다.padding: 15px;: 내용과 테두리 사이의 여백을 설정합니다.border-image: url(...) 30 round;: 첫 번째 문단에는 슬라이스 값을 숫자 30으로 지정했습니다.border-image: url(...) 2% round;: 두 번째 문단에는 백분율(%) 단위로 슬라이스 값을 지정했습니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 출력 결과가 나타납니다.
동일한 이미지를 사용했음에도 슬라이스 값의 단위와 크기에 따라 테두리 이미지가 서로 다르게 표시됩니다. 슬라이스 값이 클수록 이미지의 가장자리 부분이 더 많이 잘려 테두리에 적용되며, round 키워드에 의해 이미지 조각이 테두리 길이에 맞춰 균등하게 반복 배치됩니다. 이처럼 슬라이스 값과 반복 방식을 조절하면 원하는 분위기의 테두리를 자유롭게 연출할 수 있습니다.