[CSS3] 테두리 스타일 | border-style | box-shadow

목차

1. border-style: none;
2. border-style: hidden;
3. border-style: dotted;
4. border-style: dashed;
5. border-style: double;
6. border-style: groove;
7. border-style: inset;
8. border-style: outset;
9. border-style: ridge;
10. border-style: solid;
11. 두께 스타일 색상값;

---

 

✅ MDN Web Docs 참고 : https://developer.mozilla.org/ko/docs/Web/CSS/border-style

 

1. border-style: none;

.border-test { border-style:none; }

(육안으로 확인할 수 없음)

 

---

2. border-style: hidden;

.border-test { border-style:hidden; box-shadow:5px 5px 3px 2px gray; }

 

• box-shadow 속성을 함께 써서 그림자를 만들 수 있다. 이때 나열된 속성값은 수평거리 수직거리 흐림정도 번짐정도를 나타낸다.

---

3. border-style: dotted;

.border-test { border-style:dotted; }

• 점선 모양 테두리를 생성한다.

---

4. border-style: dashed;

.border-test { border-style:dashed; border-top-color:blue; }

• 대시(-) 기호로 이루어진 테두리를 만든다.
• border-top-color에 대해서만 blue; 색상을 적용한 예시이다.

---

5. border-style: double;

.border-test { border-style:double; border-color:blue; }

• 이중 테두리 형태를 가진다.

---

6. border-style: groove;

.border-test { border-style:groove; border-top-left-radius:50px; }

• radius 속성과 함께 써서 테두리를 둥글게 만들 수 있다.

---

7. border-style: inset;

.border-test { border-style:inset; border-bottom-right-radius:50px; }

---

8. border-style: outset;

.border-test { border-style:outset; border-top-left-radius:50px; border-bottom-right-radius:50px; }

---

9. border-style: ridge;

.border-test { border-style:ridge; box-shadow:5px 5px 3px 2px gray; }

---

10. border-style: solid;

.border-test { border-style:solid; border-bottom-width : 10px; }

• 한쪽 테두리 크기에 대해서만 더 굵게 처리할 수 있다.

---

11. 두께 스타일 색상값;

.border-test {
	border-top : 5px double blue;
	border-left : 1px dotted black;
	border-right : 1px dashed blue;
	border-bottom : 5px solid black;
}

• 테두리 사면에 대해 두께 스타일 색상값;을 순서대로 명시해 적용할 수 있다.