CSS의 border-image-slice 속성은 border-image-source로 지정한 테두리 이미지를 어떻게 잘라낼(slice)지 결정하는 속성입니다. 이미지를 네 개의 모서리, 네 개의 변, 그리고 중앙 영역으로 나누어 각 부분이 요소의 테두리에 배치되도록 조절할 수 있습니다.
주요 특징
border-image-slice 속성은 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 최대 4개의 값을 지정할 수 있으며, 값은 숫자(픽셀 또는 벡터 이미지의 좌표)나 백분율(%)로 표현합니다. 선택적으로 fill 키워드를 함께 사용하면 잘라낸 이미지의 중앙 부분을 요소의 배경으로도 채울 수 있습니다.
예제 코드
다음 예제는 border-image-slice 속성을 실제로 적용한 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<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로 설정하고, 투명하게 만들어 이미지가 보이도록 합니다.
- border-image-source – 테두리로 사용할 이미지 파일의 경로를 지정합니다.
- border-image-repeat: round; – 이미지 조각이 테두리 영역에 맞도록 반복 배치하며, 크기를 균등하게 조정합니다.
- border-image-slice: 50; – 이미지의 각 가장자리에서 안쪽으로 50px만큼 떨어진 위치를 기준으로 이미지를 9개 영역으로 나눕니다.
이처럼 border-image-slice 속성을 활용하면 단순한 실선이 아니라 다양한 패턴과 장식적인 이미지 테두리를 손쉽게 구현할 수 있습니다. 반응형 디자인에서도 이미지가 유연하게 늘어나거나 반복되므로, 버튼·카드·알림창 등의 UI 요소를 돋보이게 하는 데 유용합니다.