CSS의 border-style 속성은 요소의 테두리(보더) 스타일을 지정하는 데 사용됩니다. 실선, 점선, 이중선 등 다양한 스타일로 테두리를 표현할 수 있으며, border-top-style, border-right-style, border-bottom-style, border-left-style 속성을 활용하면 각 변(면)마다 개별적으로 다른 테두리 스타일을 적용할 수도 있습니다.
주요 border-style 값
border-style 속성에 사용할 수 있는 대표적인 값은 다음과 같습니다.
- solid – 기본 실선
- dashed – 파선(긴 점선)
- dotted – 점선
- double – 이중선
- ridge / groove – 입체감 있는 융기·홈 모양 선
- inset / outset – 안쪽·바깥쪽으로 파인 입체 테두리
- none / hidden – 테두리 없음
문법(Syntax)
CSS border-style 속성의 기본 문법은 다음과 같습니다.
Selector {
border-style: /*값*/;
}값은 한 개부터 네 개까지 지정할 수 있으며, 개수에 따라 적용되는 방향이 달라집니다.
- 값 1개 → 네 방향 모두 동일하게 적용
- 값 2개 → 첫 번째는 상·하, 두 번째는 좌·우에 적용
- 값 3개 → 상, 좌·우, 하 순서로 적용
- 값 4개 → 상, 우, 하, 좌 순서(시계 방향)로 적용
예제 1
다음 예제는 서로 다른 border-style 값을 적용한 결과를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type {
margin: 5% 0 0 20%;
}
div {
height: 40px;
width: 40px;
margin: auto;
padding: 10px;
border-style: solid;
display: flex;
float: left;
}
#d1 {
border-style: double dashed;
}
#d2 {
border-style: dotted;
}
</style>
</head>
<body>
<div></div>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 div에는 실선(solid), 두 번째 div에는 상하가 이중선(double), 좌우가 파선(dashed)으로 적용되고, 세 번째 div에는 점선(dotted) 테두리가 나타납니다.
예제 2
다음 예제는 border-width, border-color, border-radius와 함께 border-style을 조합하여 더욱 다채로운 테두리를 만드는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 20px;
float: left;
height: 80px;
width: 60px;
border-style: ridge;
border-width: 1.2em;
border-color: midnightblue;
border-bottom-left-radius: 50%;
}
div + div {
height: 120px;
width: 80px;
border-style: double;
border-color: seagreen;
border-right-width: 180px;
border-bottom-right-radius: 100%;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 div는 미드나잇블루(midnightblue) 색상의 두꺼운 ridge 테두리와 왼쪽 아래가 둥근 형태로, 두 번째 div는 시그린(seagreen) 색상의 double 테두리와 오른쪽 아래가 완전히 둥근 형태로 렌더링됩니다.
마무리
border-style 속성은 테두리를 시각화하는 데 필수적인 속성입니다. border-width, border-color, border-radius 등의 속성과 함께 조합하면 단순한 선을 넘어 다양하고 세련된 디자인 효과를 손쉽게 구현할 수 있습니다.