border-style
- 테두리의 속성(실선, 점선, 이중선 등등)을 지정하는 속성
<!DOCTYPE html>
<html lang="ko">
<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>
div { width: 200px; height: 20px; margin: 20px; }
.div-1 { border-style: none; }
.div-2 { border-style: solid; }
.div-3 { border-style: dotted; }
.div-4 { border-style: dashed; }
.div-5 { border-style: double; }
</style>
</head>
<body>
<div class="div-1">테두리 속성 없음</div>
<div class="div-2">테두리 속성 실선</div>
<div class="div-3">테두리 속성 점선</div>
<div class="div-4">테두리 속성 대쉬</div>
<div class="div-5">테두리 속성 이중선</div>
</body>
</html>
border-width
- 테두리의 두께를 지정하는 속성
- 1개 지정
4방향 테두리 지정
- 2개 지정
상하 -> 좌우 순으로 지정
- 3개 지정
위 -> 좌우 -> 아래 순으로 지정
- 4개 지정
위 -> 우 -> 아래 -> 좌 순으로 지정
<!DOCTYPE html>
<html lang="ko">
<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>
div { width: 200px; height: 20px; margin: 20px; }
.div-1 { border-width: 5px; border-style: solid; }
.div-2 { border-width: 5px 10px; border-style: solid; }
.div-3 { border-width: 5px 10px 15px; border-style: solid; }
.div-4 { border-width: 5px 10px 15px 20px; border-style: solid; }
</style>
</head>
<body>
<div class="div-1">테두리 두께 1개</div>
<div class="div-2">테두리 두께 2개</div>
<div class="div-3">테두리 두께 3개</div>
<div class="div-4">테두리 두께 4개</div>
</body>
</html>
border-color
<!DOCTYPE html>
<html lang="ko">
<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>
.div-1 {
border-color: blue;
border-width: 5px;
border-style: solid;
width: 200px;
}
</style>
</head>
<body>
<div class="div-1">테두리 색상</div>
</body>
</html>
border
- 테두리의 두께, 속성, 색상을 한번에 지정하는 속성
<!DOCTYPE html>
<html lang="ko">
<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>
.div-1 {
width: 200px;
border: 5px solid blue;
}
</style>
</head>
<body>
<div class="div-1">테두리 한번에</div>
</body>
</html>
border-radius
- 테두리의 꼭짓점을 둥글게 조절하는 속성
- 각 꼭지점을 각각지정하고 싶다면 아래의 속성명으로 지정이 가능
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius