• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Border</title>
7
    <style>
8
        .dotted {border-style: dotted;}
9
        .dashed {border-style: dashed;}
10
        .solid {border-style: solid;}
11
        .double {border-style: double;}
12
        .groove {border-style: groove;}
13
        .ridge {border-style: ridge;}
14
        .inset {border-style: inset;}
15
        .outset {border-style: outset;}
16
        .none {border-style: none;}
17
        .hidden {border-style: hidden;}
18
        .mix {border-style: solid dashed dotted double;}
19
    </style>
20
</head>
21
​
22
<body>
23
​
24
    <h1>border-style 속성을 이용한 테두리의 모양 변경</h1>
25
    <p class="dotted">border-style 속성값을 dotted로 한 단락입니다.</p>
26
    <p class="dashed">border-style 속성값을 dashed로 한 단락입니다.</p>
27
    <p class="solid">border-style 속성값을 solid로 한 단락입니다.</p>
28
    <p class="double">border-style 속성값을 double로 한 단락입니다.</p>
29
    <p class="groove">border-style 속성값을 groove로 한 단락입니다.</p>
30
    <p class="ridge">border-style 속성값을 ridge로 한 단락입니다.</p>
31
    <p class="inset">border-style 속성값을 inset으로 한 단락입니다.</p>
32
    <p class="outset">border-style 속성값을 outset으로 한 단락입니다.</p>
33
    <p class="none">border-style 속성값을 none으로 한 단락입니다.</p>
34
    <p class="hidden">border-style 속성값을 hidden으로 한 단락입니다.</p>
35
    <p class="mix">border마다 각각의 border-style 속성값을 적용한 단락입니다.</p>
36
​
37
</body>
38
​
39
</html>