CSS에서 border-image-width 속성은 요소의 테두리에 적용되는 이미지의 너비를 지정할 때 사용합니다. 이 속성을 활용하면 테두리 영역 안에서 테두리 이미지가 차지하는 두께를 자유롭게 조절할 수 있습니다.
border-image-width 속성의 주요 값
- 길이 단위(px, em 등) – 픽셀이나 상대 단위로 너비를 직접 지정합니다.
- 숫자(number) – 해당 요소 border-width 값의 배수로 계산됩니다.
- 백분율(%) – 가로 방향은 테두리 영역의 너비에 대해, 세로 방향은 높이에 대한 비율로 설정됩니다.
- auto – border-image-slice 속성의 값을 기준으로 자동 계산됩니다.
예제 코드
아래 코드는 border-image-width 속성을 실제로 적용한 예시입니다. 코드를 실행하면 테두리 이미지의 너비가 20px로 지정된 것을 확인할 수 있습니다.
<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: 40;
border-image-width: 20px;
}
</style>
</head>
<body>
<p id = "borderimg1">테두리 이미지 예시입니다.</p>
</body>
</html>코드 설명
- border: 15px solid transparent; – 투명한 기본 테두리를 만들어 이미지 테두리가 들어갈 공간을 확보합니다.
- border-image-source – 테두리에 사용할 이미지 파일의 경로를 지정합니다.
- border-image-slice: 40; – 이미지를 어떻게 잘라낼지 슬라이스 크기를 정합니다.
- border-image-repeat: round; – 잘라낸 이미지 조각이 테두리를 채우도록 반복 배치하며, 남는 부분 없이 균등하게 맞춥니다.
- border-image-width: 20px; – 테두리 이미지의 실제 표시 너비를 20픽셀로 설정합니다.
border-image-width 값이 원래 border 두께보다 크면 이미지가 요소 내부(padding 영역)까지 침범할 수 있으므로, 디자인 의도에 맞게 값을 조절하는 것이 좋습니다.