CSS에서 border-right-width 속성은 요소의 오른쪽 테두리(border) 두께를 지정하는 데 사용됩니다. 이 속성을 활용하면 요소의 네 방향 중 오른쪽 테두리만 선택적으로 굵게 또는 얇게 표현할 수 있어, 디자인에 따라 세밀한 스타일 조정이 가능합니다.
border-right-width 속성이란?
border-right-width는 개별 테두리 두께 속성 중 하나로, 다음과 같은 값을 가질 수 있습니다.
- thin – 얇은 테두리 (일반적으로 1px)
- medium – 중간 두께의 테두리 (기본값, 일반적으로 3px)
- thick – 두꺼운 테두리 (일반적으로 5px)
- <길이 값> – px, em, rem 등 직접 지정하는 값
참고로 테두리 두께가 화면에 나타나려면 반드시 border-style 속성(solid, dashed 등)이 함께 설정되어야 합니다. 스타일이 지정되지 않으면 기본값인 none으로 인해 테두리가 보이지 않습니다.
사용 예제
아래 코드는 border-right-width 속성을 실제로 적용한 예시입니다. 문단 요소의 오른쪽 테두리를 6px 두께의 실선으로 표시합니다.
<html> <head> </head> <body> <p style = "border-right-width:6px;border-style:solid;"> This is demo content. </p> </body> </html>
추가 팁: 테두리 색상과 함께 사용하기
테두리 두께와 함께 border-right-color 속성을 지정하면 더욱 돋보이는 디자인을 만들 수 있습니다.
p {
border-right-width: 6px;
border-right-style: solid;
border-right-color: #3498db;
}
또한 border-right 축약(shorthand) 속성을 사용하면 두께, 스타일, 색상을 한 번에 선언할 수 있어 코드가 간결해집니다.
p {
border-right: 6px solid #3498db;
}