[CSS] border-radius와 box-sizing: border-box 개념

웹 퍼블리싱에서 자주 사용하는 CSS 속성 중
border-radius와 box-sizing은 레이아웃과 디자인 안정성에 큰 영향을 줍니다.

 

1. border-radius: 모서리 둥글게 만들기

1️⃣  border-radius는 요소의 모서리를 둥글게 만드는 속성입니다.

.card {
  border-radius: 8px;
}

• 테두리(border) 유무와 관계없이 적용 가능
• 배경색, 이미지에도 동일하게 적용

카드 UI, 버튼, 모달에서 필수 속성

 

2️⃣ 개별 모서리 설정도 가능

border-radius: 8px 8px 0 0;

좌상 / 우상 / 우하 / 좌하 순서

 

2. box-sizing: 박스 크기 계산 방식

box-sizing은 요소의 전체 크기를 어떻게 계산할지를 정하는 속성입니다.

 

1️⃣ 기본값: content-box

width: 300px;
padding: 20px;
border: 10px;

실제 화면에서 차지하는 크기는 300px보다 큼

 

2️⃣ 실무에서 쓰는 값: border-box

box-sizing: border-box;

• width 안에 padding과 border 포함
• 레이아웃 계산이 직관적

 

3. 함께 쓰면 좋은 조합

.card {
  padding: 16px;
  border-radius: 12px;
  box-sizing: border-box;
}

 

 

 

정리하면

 

border-radius는 요소의 모서리를 둥글게 만들고,
box-sizing: border-box는 박스 크기 계산을 단순하게 만든다.