• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Border</title>
7
    <style>
8
        .dottedA {
9
            border-style: dotted;
10
            border-width: 2px;
11
        }
12
        .dottedB {
13
            border-style: dotted;
14
            border-width: 5px;
15
        }
16
        .dashedA {
17
            border-style: dashed;
18
            border-width: thin;
19
        }
20
        .dashedB {
21
            border-style: dashed;
22
            border-width: thick;
23
        }
24
        .doubleA {
25
            border-style: double;
26
            border-width: 5px;
27
        }
28
        .doubleB {
29
            border-style: double;
30
            border-width: thick;
31
        }
32
        .mix {
33
            border-style: solid;
34
            border-width: 1px 2px 10px thick;
35
        }
36
    </style>
37
</head>
38
​
39
<body>
40
​
41
    <h1>border-width 속성을 이용한 테두리의 두께 설정</h1>
42
    <p class="dottedA">border-width 속성값을 2px로 한 단락입니다.</p>
43
    <p class="dottedB">border-width 속성값을 5px로 한 단락입니다.</p>
44
    <p class="dashedA">border-width 속성값을 thin으로 한 단락입니다.</p>
45
    <p class="dashedB">border-width 속성값을 thick으로 한 단락입니다.</p>
46
    <p class="doubleA">border-width 속성값을 5px로 한 단락입니다.</p>
47
    <p class="doubleB">border-width 속성값을 thick으로 한 단락입니다.</p>
48
    <p class="mix">border마다 각각의 border-width 속성값을 적용한 단락입니다.</p>
49
​
50
</body>
51
​
52
</html>