CSS에서 border 속성을 사용하면 선의 색상(color), 스타일(style), 두께(width)를 하나의 속성으로 동시에 지정할 수 있습니다.
border 단축 속성이란?
border는 CSS의 대표적인 단축 속성(shorthand property)입니다. 개별적으로 border-color, border-style, border-width를 선언하는 대신, 아래와 같은 형식으로 한 줄에 모두 작성할 수 있습니다.
border: [두께] [스타일] [색상];
예를 들어 border: 3px solid green;은 '3픽셀 두께의 초록색 실선' 테두리를 의미합니다.
예제 코드
다음 코드를 실행하여 border 단축 속성을 직접 확인해 보세요.
<html> <head> </head> <body> <p style = "border:3px solid green;"> border 단축 속성을 보여주는 예제입니다. </p> </body> </html>
사용 가능한 주요 스타일 값
- solid — 실선
- dashed — 파선(점선)
- dotted — 점선
- double — 이중선
- groove / ridge / inset / outset — 입체 효과가 있는 테두리
참고 사항
단축 속성에서 값을 생략하면 기본값이 적용됩니다. 다만 스타일 값(none, hidden 제외)을 반드시 포함해야 하며, 스타일이 지정되지 않으면 기본값인 none 때문에 테두리가 화면에 나타나지 않습니다.