CSS의 border-image-width 속성은 요소의 테두리에 적용되는 이미지의 너비를 지정할 때 사용합니다. 이 속성을 활용하면 border-image-source로 불러온 테두리 이미지가 실제 화면에 그려지는 두께를 자유롭게 조절할 수 있습니다.
border-image-width 속성이란?
border-image-width는 테두리 이미지가 그려지는 영역의 두께를 결정하는 속성입니다. 일반적인 border-width와는 별개로 동작하며, 테두리 이미지의 표시 크기를 원본 테두리 두께와 다르게 설정하고 싶을 때 유용하게 활용됩니다.
사용할 수 있는 값
- 길이 단위(px, em 등) – 테두리 이미지의 너비를 절대값으로 지정합니다.
- 백분율(%) – 테두리 이미지 영역의 크기를 기준으로 상대적으로 지정합니다.
- 숫자(number) – 해당 방향의 border-width 값에 곱해지는 배수로 지정합니다.
- auto – border-image-slice 속성에서 계산된 값을 그대로 사용합니다.
예제 코드
아래 코드를 실행하면 border-image-width 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다.
<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">테두리 이미지 예제입니다.</p>
</body>
</html>코드 설명
border: 15px solid transparent;– 15px 두께의 투명한 테두리를 만들어 이미지가 들어갈 공간을 확보합니다.border-image-slice: 50;– 테두리 이미지를 잘라낼 기준선을 지정합니다.border-image-repeat: round;– 이미지 조각이 테두리를 꽉 채우도록 반복 배치하며, 필요하면 크기를 살짝 조정합니다.border-image-width: 10px;– 테두리 이미지가 실제로 표시되는 너비를 10px로 설정합니다.
이처럼 border-image-width 속성을 사용하면 테두리 이미지의 시각적 두께를 세밀하게 제어할 수 있어, 다양한 디자인 요구 사항에 맞춘 테두리 연출이 가능합니다.