안녕하세요. 오늘은 CSS border에 알아볼게요.
CSS border
border는 박스의 테두리를 뜻해요.
박스모델은 테두리나 마진, 패딩 등 지정할 때
상 하 좌 우 4개의 방향을 똑같이 지정하거나 모두 다르게 지정이 가능해요.
border-style 속성
border-style속성의 기본값은 none으로
속성값을 따로 지정하지 않으면 테두리 색상, 두께를 지정하더라고 화면에 표시가 안돼요.
다음은 border-style에 대한 종류와 예제예요.
| none | 테두리❌ : 기본값 |
| hidden | 테두리 감추기 표에서 border-collapse: collapse일 경우 다른 테두리도 표시❌ |
| solid | 테두리를 실선으로 표시 |
| dotted | 테두리를 점선으로 표시 |
| dashed | 테두리를 짧은 직선으로 표시 |
| double | 테두리를 이중선으로 표시, border-width값 : 두 선 사이의 간격 |
| groove | 테두리를 창에 조각한 것처럼 표시, 홈이 파인 듯한 입체 느낌 |
| inset | 표에서 border-collapse: seperate일 경우 → 전체 박스 테두리가 창에 박혀 있는 것 처럼 표시 표에서 border-collapse: collapse일 경우 groove와 똑같이 표시 |
| outset | 표에서 border-collapse: collapse일 경우 → 전체 박스 테두리가 창에서 튀어나온 것처럼 표시 표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시 |
| ridge | 테두리를 창에서 튀어나온 것처럼 표시 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
width:100px;
height:100px;
display:inline-block;
margin:15px;
text-align: center;
font-size:10px;
line-height:100px;
border-width:5px; /* 테두리 굵기 */
}
#box1 { border-style:solid; } /* 실선 */
#box2 { border-style:dotted; } /* 점선 */
#box3 { border-style:dashed; } /* 짧은 점선 */
#box4 { border-style:double; }
#box5 { border-style:groove; }
#box6 { border-style:inset; }
#box7 { border-style:outset; }
#box8 { border-style:ridge; }
</style>
</head>
<body>
<div id="box1"> 실선 테두리 </div>
<div id="box2"> 점선 테두리 </div>
<div id="box3"> 짧은 직선 테두리</div>
<div id="box4"> 이중선 테두리</div>
<div id="box5"> groove 테두리</div>
<div id="box6"> inset 테두리</div>
<div id="box7"> outset 테두리</div>
<div id="box8"> ridge 테두리</div>
</body>
</html>
border-width 속성
테두리 두께 지정으로 직접 입력하거나 예약어를 사용할 수 있어요.
/*기본형*/
border-width: <크기> | thin | medium | thick상하좌우 4개 방향의 테두리를 한꺼번에 지정하거나
OR값을 1 ~ 4개를 각각 다르게 지정이 가능해요.
다음은 border-width 예제에요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border-style:solid; /* 테두리 스타일 - 실선 */
}
#box1 { border-width:2px; }
#box2 { border-width:thick thin; }
#box3 { border-width:thick thin thin; }
#box4 { border-width:10px 5px 5px 10px; }
</style>
</head>
<body>
/* 네 방향 모두 2px */
<div id="box1"> </div>
/* top & bottom - thick, left & right - thin */
<div id="box2"> </div>
/* top - thick, right - thin, bottom - thin, left - thin */
<div id="box3"> </div>
/* top - 10px, right - 5px, bottom - 5px, left - 10px */
<div id="box4"> </div>
</body>
</html>
border 속성
테두리 스타일을 묶어 지정하는 속성으로 테두리 스타일 / 두께 / 색상 속성을 순서 상관없이 한꺼번에 표현할 수 있어요.
그리고 상하좌우 4개 방향의 테두리 생상을 한꺼번에 지정이 가능하거나
값을 1 ~ 4개를 각각 다르게 지정이 가능해요.
다음은 border 속성의 예제에요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
body {
width: 400px;
}
h1 {
padding-bottom: 5px;
border-bottom: 3px solid rgb(75, 70, 70); /* 아래쪽 테두리만 3px짜리 회색 실선*/
}
p {
padding: 10px;
border: 3px dotted blue; /* 모든 테두리를 3px짜리 파란 점선 */
}
</style>
</head>
<body>
<h1>박스 모델</h1>
<p>박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다. </p>
</body>
</html>
bordeer-radius 속성
둥근 테두리를 만드는 속성으로
박스 모델의 꼭짓점 부분에 원이 있다고 가정하고 둥글게 처리하는 방법이에요.
/*기본형*/
border-radius: <크기> | <백분율>
| <크기> | 반지름 크기를 px, em 단위와 함께 수치로 표시 |
| <백분율> | 현재 요소의 크기를 기준으로 비율(%) 지정 |
다음은 border-radius 예제에요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 200px;
height: 200px;
}
#round {
border-radius: 25px;
}
#circle {
border-radius: 50%;
}
</style>
</head>
<body>
<img src="./ditto-lotte.jpg" />
<img id="round" src="./ditto-lotte.jpg" />
<img id="circle" src="./ditto-lotte.jpg" />
</body>
</html>
추가 + 꼭짓점을 타원으로 만들기
가로 반지름과 세로 반지름 사이에 슬래시( / )를 넣어서 구분 border-radius
<가로 반지름> / <세로 반지름>;
특정 꼭짓점만 타원형태로 지정 : 슬래시 없이 가로 반지름, 세로 반지름을 지정 border-위치-radius
<가로 반지름> < 세로 반지금>;
다음은 타원 만들기 예제예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
background:#ffd800;
border:2px solid #222;
}
.round1{
/* 네 군데 꼭짓점을 똑같은 크기로 라운딩 */
border-radius : 50px/30px;
}
.round2{
/* 오른쪽 아래 꼭짓점을 가로 50%, 세로 30% 크기로 라운딩 */
border-bottom-right-radius : 50% 30%;
}
.round3{
/* 왼쪽 위 꼭짓점을 가로 50px, 세로 30px 크기로 라운딩 */
border-top-left-radius: 50px 30px;
}
.round4{
/* 값이 하나 뿐이면 가로 세로 똑같이 30px 크기로 라운딩 */
border-bottom-left-radius: 30px;
}
</style>
</head>
<body>
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
<div class="round4"></div>
</body>
</html>
여기까지 CSS border에 대해 알아봤는데요.
박스모형을 단순하게 가 아닌 다양하게 바꿀 수 있다는 걸 알아서 재밌었어요.
여러분들은 어떠신가요?
'Frontend > CSS' 카테고리의 다른 글
| CSS Layout (display / float / clear) (0) | 2025.10.24 |
|---|---|
| CSS margin & padding (0) | 2025.10.22 |
| CSS Box-Model (0) | 2025.10.18 |
| CSS Values & Units (0) | 2025.10.16 |
| CSS Text / List / Table Style (3) (0) | 2025.10.14 |