CSS에서 border는 겉보기엔 박스에 선을 둘러주는 속성처럼 보이지만, 실제로는 요소의 박스 모델을 구성하는 한 축이고, 동시에 시각적 위계를 만드는 가장 단순하면서도 강력한 도구이다.
아마 다들 프로젝트를 진행하다 보면 '왜 테두리를 주면 요소 크기가 커져 보이지?', 'outline이랑 border는 뭐가 다르지?' 등의 궁금증을 가져 봤을 것이다.
따라서 오늘 글에서는 border가 어떤 공간을 차지하고, 어떤 방식으로 그려지고, 어떤 문제들을 조심해야 하는지 등을 정리해보고자 한다.
1. border 기본 문법
우선 기본적인 사용법부터 보면, 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
그럼 다음과 같이 테두리가 생기는 것을 확인할 수 있다.
아니면 다음과 같이 펼쳐서 작성해도 동일한 결과가 나온다. (나는 개인적으로 이걸 더 선호하는 편 ..)
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
border-width: 1px;
border-style: solid;
border-color: black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1.1. 1px이 아니라 0.8px이라 뜨는데요?
실제로 브라우저는 devicePixelRatio, 브라우저 줌 배율, transform(scale) 등의 영향을 받아 CSS 픽셀을 소수점 단위로 계산한다.
예를 들어 devicePixelRatio가 1.25인 환경에서 `border: 1px`을 적용하면, 브라우저는 물리 픽셀에 가장 자연스럽게 맞추기 위해 0.8px, 0.75px과 같은 값으로 렌더링할 수 있다.
따라서 개발자 도구에서 0.8px로 보이는 것은 CSS 값이 바뀐 것이 아니라, 브라우저가 계산한 결과일 뿐이다.
[Web] CSS 단위 정리 (px, %, em, rem)
CSS에서 단위는 얼마나 크게, 얼마나 넓게 같은 값을 표현할 때 사용한다.이때 문제는 단위를 하나만 쓰는 게 아니라, 상황에 따라 단위가 다르게 동작한다는 점이다. 그래서 처음 접할 땐 px이 제
kssossok.tistory.com
1.2. border를 주니까 박스 크기도 커져요
이건 앞서 봤던 포스팅에도 나와있는 건데, border 또한 padding과 마찬가지로 요소 내부에 포함되는 영역이기 때문이다.
따라서 이것도 border로 인해 요소가 커지는 게 싫다면 `box-sizing: border-box`를 추가해주면 된다.
(자세한 건 아래 포스팅을 참고하면 된다.)
[Web] margin과 padding의 차이점 (+ margin 병합, box-sizing)
CSS를 배우다 보면 가장 먼저 만나는 레이아웃 관련 속성이 margin과 padding이다.둘 다 여백을 준다는 공통점이 있긴 하지만, 실제로는 여백이 생기는 위치가 다르고, 그 차이 때문에 화면의 배치 결
kssossok.tistory.com
1.3. 테두리를 상하좌우 다 주지 말고, 일부만 주고 싶어요.
border는 방향별로 속성이 전부 나누어져 있다.
border-top, border-bottom, border-right, border-left로 나누어져 있기 때문에 color를 줄 때에도 border-top-color, border-bottom-color 등으로 구분해서 지정해줄 수 있다.
예를 들어 다음과 같이 테두리 두께를 두껍게 주고 top, right, bottom, left에 각각 다른 색을 지정해줘보자.
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
border-width: 5px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
그럼 아래처럼 각 테두리에 지정한 색이 잘 입혀진 것을 확인할 수 있다.
하나씩 지정해주기가 귀찮다면, 아래와 같이 한 줄로 지정하는 것도 가능하다.
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
border-width: 5px;
border-style: solid;
border-color: red green blue black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
한 줄로 작성할 때에는 순서대로 위, 오른쪽, 아래, 왼쪽으로 적용되며, 12시부터 시계방향으로 돌아가며 적용되는 거라 보면 된다.
결과는 아까 위에서 각각 색을 지정해준 거랑 똑같이 잘 나오는 것을 확인할 수 있다.
1.4. border의 style 종류
다음 문서를 통해 직접 확인해보자.
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
border-width: 10px;
border-color: black;
margin: 10px
}
</style>
</head>
<body>
<div class="box" style="border-style: solid;">solid</div>
<div class="box" style="border-style: none;">none</div>
<div class="box" style="border-style: dotted;">dotted</div>
<div class="box" style="border-style: dashed;">dashed</div>
<div class="box" style="border-style: double;">double</div>
<div class="box" style="border-style: groove;">groove</div>
<div class="box" style="border-style: ridge;">ridge</div>
<div class="box" style="border-style: inset;">inset</div>
<div class="box" style="border-style: outset;">outset</div>
</body>
</html>
결과는 아래와 같다.
2. border vs outline
outline은 border처럼 선이 보이긴 하지만, 레이아웃 공간을 차지하지는 않는 것이다.
border에 관한 첫 예시 코드를 가져와보자.
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
다음과 같이 우리가 정한 너비와 높이보다 살짝 커져서 보이는 것을 확인할 수 있었다.
그럼 이번엔 border 대신에 outline을 사용해보자.
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
outline: 1px solid black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
똑같이 테두리가 들어가 있지만, 얘는 최종 요소의 크기가 우리가 정한 200px, 100px로 맞춰져 있음을 확인할 수 있다.
3. border-radius
이번에는 border-radius를 이용해서 모서리에 둥글기를 줘보자.
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
다음과 같이 이젠 테두리가 둥글게 된 것을 확인할 수 있다.
그럼 box에 색을 칠해도 테두리를 넘치지 않고 잘 칠해지는지 확인해보자.
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 12px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
일단은 별 문제 없이 잘 되는 것 같다.
그럼 이번에는 box에 색을 주는 대신 이미지를 입혀 보자.
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 12px;
}
.box img {
width: 100%;
height: 100%;
object-fit: cover; /* 박스 꽉 채우기 */
}
</style>
</head>
<body>
<div class="box">
<img src="sampleimg.png">
</div>
</body>
</html>
결과를 보면 다음과 같이 둥글게 잘린 모서리를 넘쳐 사진이 배치된 것을 확인할 수 있다.
이는 border-radius가 부모 요소의 테두리(border) 모양만 변경할 뿐, 내부에 있는 자식 요소(img)의 렌더링 영역까지 함께 제한하지는 않기 때문이다.
따라서 별도의 처리를 하지 않으면, 자식 요소는 둥근 모서리를 무시한 채 자신의 사각형 영역 그대로 렌더링된다.
이를 방지하려면 `overflow: hidden`을 꼭 넣어 주어야 한다.
<!DOCTYPE html>
<html>
<head>
<title>Border Example</title>
<style>
.box{
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 12px;
overflow: hidden; /* 경계 밖 내용 숨기기 */
}
.box img {
width: 100%;
height: 100%;
object-fit: cover; /* 박스 꽉 채우기 */
}
</style>
</head>
<body>
<div class="box">
<img src="sampleimg.png">
</div>
</body>
</html>
그럼 이번엔 우리가 원하던 대로 둥근 사각형 박스 안에 이미지가 잘 들어가 있음을 볼 수 있다.
'👩🏻💻 Frontend > 📌 Web' 카테고리의 다른 글
| [Web] MVC와 MVVM (0) | 2026.02.05 |
|---|---|
| [Web] CSS의 가시 속성 (display, block, inline, inline-block 등) (0) | 2026.02.03 |
| [Web] margin과 padding의 차이점 (+ margin 병합, box-sizing) (0) | 2026.02.03 |
| [Web] CSS 단위 정리 (px, %, em, rem) (0) | 2026.02.02 |
| [Web] CSS의 기본 선택자 (0) | 2026.02.02 |