▣ border-width
· 테두리 두께 설정
· Top, bottom, left, right를 이용하여 네 방향으로 설정 가능
| 속성값 | 설명 |
| 수치 | 테두리의 두께를 픽셀(px), 포인트(pt), 센티미터(cm)같은 단위로 지정한다. |
| thin | 얇은(1px) 두께의 테두리를 지정한다. |
| medium | 중간(3px) 두께의 테두리를 지정한다. 기본값이다. |
| thick | 굵은(5px) 두께의 테두리를 지정한다. |
▣ border-color
· 테두리 색상 지정
· black을 #000000 / 0, 0, 0 으로 표현가능
▣ border-style
· 테두리 스타일 지정
| 속성값 | 설명 |
| none | 테두리가 나타나지 않는다. 기본값이다. |
| hidden | 테두리를 감춘다. |
| dotted | 테두리를 점섬으로 지정한다. |
| dashed | 테두리를 파선으로 지정한다. |
| solid | 테두리를 실선으로 지정한다. |
| double | 테두리를 이중선으로 지정한다. |
| groove | 테두리를 오목한 선으로 (홈이 파인 듯 입체적으로) 지정한다. |
| ridge | 테두리를 볼록한 선으로 (튀어나온 듯 입체적으로) 지정한다. |
| inset | 테두리의 안쪽이 오목한 선으로 지정한다. |
| outset | 테두리의 안쪽이 볼록한 선으로 지정한다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테두리 스타일 지정하기</title>
<style>
body {
font-family: consolas;
}
h3.none {
border-style: none;
}
h3.hidden {
border-style: hidden;
}
h3.dotted {
border-style: dotted;
}
h3.dashed {
border-style: dashed;
}
h3.solid {
border-style: solid;
}
h3.double {
border-style: double;
}
h3.groove {
border-style: groove;
}
h3.ridge {
border-style: ridge;
}
h3.inset {
border-style: inset;
}
h3.outset {
border-style: outset;
}
h3.mix {
border-style: dotted dashed solid double;
}
</style>
</head>
<body>
<h3 class="none">no border</h3>
<h3 class="hidden">hidden border</h3>
<h3 class="dotted">dotted border</h3>
<h3 class="dashed">dashed border</h3>
<h3 class="solid">solid border</h3>
<h3 class="double">double border</h3>
<h3 class="groove">groove border</h3>
<h3 class="ridge">ridge border</h3>
<h3 class="inset">inset border</h3>
<h3 class="outset">outset border</h3>
<h3 class="mix">mix border</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테두리의 네 방향에 각각 다른 속성 지정하기</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
font-weight: bold;
font-size: 21pt;
font-family: consolas;
}
.bt1 {
background-color: aqua;
color: red;
margin: 10px;
margin-bottom: 30px;
padding-left: 50px;
border-style: dotted;
border-width: thick;
border-color: green;
}
.bt2 {
background-color: silver;
color: purple;
margin: 20px;
padding: 5px 10px;
border-style: solid;
border-width: 1px 3px 5px 3px;
border-color: navy red fuchsia black
}
.bt3 {
background-color: yellow;
color: green;
margin: 50px 15px 20px;
padding: 20px;
border-style: dashed double;
border-width: 5px 0px;
border-color: red;
}
.bt4 {
margin: 50px 30px;
border-top: 5px solid red;
border-bottom: 5px solid blue;
}
</style>
</head>
<body>
<p class="bt1">박스 테두리 지정 - 1</p>
<p class="bt2">박스 테두리 지정 - 2</p>
<p class="bt3">박스 테두리 지정 - 3</p>
<p class="bt4">박스의 상하좌우 테두리는 border-top, border-right, border-bottom, border-left라는 속성을 이용해 지정할 수 있습니다.</p>
</body>
</html>