Box Model의 border 속성

 

https://velog.io/@mazorika/CSS-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8%EA%B3%BC-%EB%B0%95%EC%8A%A4-%ED%85%8C%EB%91%90%EB%A6%AC

 

🌟 박스 모델 방향 🌟 

↩️(시계 방향으로)↩️

12시 - top
09시 - left                                03시 - right
06시 - bottom

---

https://honarsystems.com/css-border-radius/

 

🌟 border-radius 방향 🌟 

↩️(시계 방향으로)↩️

10시 30분       01시 30분

07시 30분       04시 30분

---

🟢   border

padding 바깥, margin 안쪽에 있는 테두리(경계선)을 설정하는 속성.

 

📦  Box Model 구조

(안 → 밖 순서)

[ content (내용) ]
[ padding (안쪽 여백) ]
[ border (테두리) ]
[ margin (바깥 여백) ]

 

🎯 주요 속성 3가지 🎯

🔹  border-width

테두리의 두께를 지정.

.box { border-width: 2px; }

• px, em 등의 단위.
• thin, medium, thick 키워드 사용.

 

🔹  border-style

테두리의 모양을 결정.

.box { border-style: 1px solid #fff; }

• 필수 속성으로 없으면 테두리가 안 보인다.
  • solid: 실선.
  • dashed: 점선.
  • dotted: 점.
  • double: 이중선.
  • none: 없음.

 

🔹  border-color

테두리의 색상을 지정.

.box { border-color: red; }

 

---

 

📐 개별 속성 

특정 방향에만 테두리 적용 속성.

.box { border: 1px solid black; } /* 기본 구조 - 4방향 모두 적용 */
.box { border-top-width: 3px; } /* 두께만 따로 */
.box { border-left-style: dashed; } /* 스타일만 따로 */

• border-top: 위쪽.
• border-right: 오른쪽.
• border-bottom: 아래.
• border-left: 왼쪽.

 

---

 

🔨 축약형 속성 (Shorthand)

테두리를 한 줄로 정의하는 속성.

/* 기본 구조 - 4방향 모두 적용 */
.box { border: 1px solid black; }

/* 방향별 축약형 */
.box { border-top: 2px solid red; }
.box { border-right: 2px solid blue; }
.box { border-bottom: 2px solid green; }
.box { border-left: 2px solid black; }

• 문법: border: border-width(두께) border-style(스타일) border-color(색상);

 

---

 

🔹  border-radius

모서리를 둥글게(곡률) 만드는 속성.

.box { border-radius: 10px; } /* 모든 모서리 10px 둥글게 */

 

• 개별 속성

 각 모서리마다 다른 값을 줄 수 있다.

.box { border-top-left-radius: 10px; }
.box { border-top-right-radius: 20px; }
.box { border-bottom-right-radius: 30px; }
.box { border-bottom-left-radius: 40px; }

 

• 원 만들기

정사각형에 50% 주면 완전한 원이 된다.

.box { border-radius: 50%; }

 

• 모서리별 설정

/* 4개 */
.box { border-radius: 10px 20px 30px 40px; }

/* 2개 */
.box { border-radius: 10px 20px; } /* (왼위+오아), (오위+왼아) */

/* 3개 */
.box { border-radius: 10px 20px 30px; } /* (왼위), (오위+왼아), (오아) */

👉 순서:

1. 왼쪽 위 (top-left)
2. 오른쪽 위 (top-right)
3. 오른쪽 아래 (bottom-right)
4. 왼쪽 아래 (bottom-left)

 

 

📍  POINT 📍 

✔️ 테두리가 화면에 나타나지 않는다면 border-style 을 빼먹지 않았는지 체크하기. ✔️

✔️ border: none; 은 버튼이나 입력창의 기본 테두리를 제거할 때 사용한다. ✔️

✔️ 보더 역시 padding 처럼 요소의 전체 크기에 영향을 주므로, 레이아웃이 틀어지는 것을 막으려면 box-sizing: border-box; 를 함께 사용하는 것이 좋다. ✔️

 

 

📋 보더 주요 속성 요약표 📋

속성	설명	주요 값 예시
border-style	테두리 모양 (필수)	solid, dashed, none
border-width	테두리 두께	1px, 0.5rem
border-color	테두리 색상	#000, transparent
border-radius	모서리 곡률	8px, 50%
outline	테두리 바깥의 외곽선	보더와 달리 공간을 차지하지 않음