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