• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Border</title>
7
    <style>
8
        .mixA, .mixB {
9
            border-style: solid;
10
            border-width: 3px;
11
        }
12
        .mixA {
13
            border-top-style: dotted;
14
            border-right-style: double;
15
            border-bottom-style: dotted;
16
            border-left-style: double;
17
        }
18
        .mixB { border-style: dotted double; }
19
    </style>
20
</head>
21
​
22
<body>
23
​
24
    <h1>테두리의 각 부분에 대한 별도의 스타일 설정</h1>
25
    <p class="mixA">border-style 속성값을 4개로 설정한 단락입니다.</p>
26
    <p class="mixB">border-style 속성값을 2개로 설정한 단락입니다.</p>
27
    <p>margin 속성값을 4개로 한 것과 2개로 한 것이 같은 효과를 내는 것에 주목하세요!</p>
28
​
29
</body>
30
​
31
</html>