• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Borders</title>
7
    <style>
8
        #p_01 {
9
            padding: 20px;
10
            border: 20px solid transparent;
11
            -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
12
            -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
13
            -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
14
            border-image: url(/examples/images/img_css3_pattern.png) 34 round;
15
        }
16
        #p_02 {
17
            padding: 20px;
18
            border: 20px solid transparent;
19
            -webkit-border-image: url(/examples/images/img_css3_pattern.png) 22 round;
20
            -moz-border-image: url(/examples/images/img_css3_pattern.png) 22 round;
21
            -o-border-image: url(/examples/images/img_css3_pattern.png) 22 round;
22
            border-image: url(/examples/images/img_css3_pattern.png) 22 round;
23
        }
24
        #p_03 {
25
            padding: 20px;
26
            border: 20px solid transparent;
27
            -webkit-border-image: url(/examples/images/img_css3_pattern.png) 10 round;
28
            -moz-border-image: url(/examples/images/img_css3_pattern.png) 10 round;
29
            -o-border-image: url(/examples/images/img_css3_pattern.png) 10 round;
30
            border-image: url(/examples/images/img_css3_pattern.png) 10 round;
31
        }
32
    </style>
33
</head>
34
​
35
<body>
36
​
37
    <h1>border-image 속성 - round 속성값</h1>
38
    <p id="p_01">테두리 중간 부분의 처리를 반복으로 설정했어요!</p>
39
    <p id="p_02">테두리 중간 부분의 처리를 반복으로 설정했어요!</p>
40
    <p id="p_03">테두리 중간 부분의 처리를 반복으로 설정했어요!</p>
41
    <p><br>위에서 사용한 원본 이미지는 다음과 같습니다.</p>
42
    <img src="/examples/images/img_css3_pattern.png">
43
​
44
</body>
45
​
46
</html>