CSS에서 border-width 속성을 사용하면 요소 테두리의 두께를 자유롭게 설정할 수 있습니다. 이 속성의 값은 px, pt, cm과 같은 길이 단위로 지정하거나, thin(얇게), medium(보통), thick(두껍게)이라는 키워드를 사용할 수도 있습니다.
사용 가능한 값 정리
- 길이 단위: px, pt, cm 등 원하는 크기만큼 정밀하게 지정
- thin: 얇은 테두리
- medium: 기본값인 보통 두께의 테두리
- thick: 두꺼운 테두리
예제 코드
아래 코드를 실행하면 CSS로 테두리 두께를 설정한 결과를 직접 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "border-width:4px; border-style:solid;"> David Beckham is a legend. </p> <p style = "border-width:4pt; border-style:dashed;"> Sachin Tendulkar is a legend. </p> </body> </html>
참고 사항
테두리 두께만 설정하고 border-style 속성을 함께 지정하지 않으면 테두리가 화면에 나타나지 않습니다. 위 예제처럼 반드시 solid(실선), dashed(파선) 등의 스타일 값을 함께 지정해야 합니다. 또한 각 변마다 다른 두께를 적용하고 싶다면 border-top-width, border-right-width, border-bottom-width, border-left-width 개별 속성을 활용할 수 있습니다.