CSS의 border-right-style 속성은 요소의 오른쪽 테두리 스타일을 변경할 때 사용합니다. 이 속성을 활용하면 실선, 점선, 파선 등 다양한 형태로 오른쪽 테두리를 자유롭게 꾸밀 수 있습니다.
사용 가능한 주요 값
- none / hidden – 테두리를 표시하지 않음
- solid – 한 줄의 실선
- dashed – 긴 파선(대시)
- dotted – 점선
- double – 두 줄의 실선
- groove / ridge / inset / outset – 입체적인 효과가 있는 테두리
예제 코드
아래 예제는 border-right-style 속성을 적용하여 오른쪽 테두리를 dashed(파선) 스타일로 지정한 코드입니다.
<html> <head> </head> <body> <p style = "border-width:4px;border-right-style:dashed;"> This is demo content </p> </body> </html>
코드 설명
위 코드에서 border-width:4px는 테두리 두께를 4픽셀로 설정하고, border-right-style:dashed는 오른쪽 테두리만 파선 형태로 표시합니다. 브라우저에서 실행하면 문단의 오른쪽에 4px 두께의 파선 테두리가 나타나는 것을 확인할 수 있습니다.
참고: 테두리 스타일이 화면에 표시되려면 반드시
border-width또는border속성으로 두께를 함께 지정해야 합니다. 두께가 0이면 스타일을 지정해도 테두리가 보이지 않습니다.