• 코드:
​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
            height: 50px;
10
            width: 200px;
11
            background: #DAA520;
12
            padding: 20px;
13
            border-radius: 25px;
14
        }
15
        #div_01 {
16
            height: 50px;
17
            width: 200px;
18
            padding: 20px;
19
            border: solid 3px #DAA520;
20
            border-radius: 25px;
21
        }
22
        #p_02 {
23
            height: 50px;
24
            width: 200px;
25
            padding: 20px;
26
            background: url(/examples/images/img_other_pattern.png);
27
            background-position: left top;
28
            background-repeat: repeat;
29
            border-radius: 25px;
30
        }
31
    </style>
32
</head>
33
​
34
<body>
35
​
36
    <h1>border-radius 속성을 이용한 둥근 모서리 설정</h1>
37
    <p id="p_01">단락 요소도 둥근 모서리를 가질 수 있어요!</p>
38
    <div id="div_01">div 요소도 둥근 모서리를 가질 수 있어요!</div>
39
    <p id="p_02">배경 이미지가 있는 요소도 둥근 모서리를 가질 수 있어요!</p>
40
​
41
</body>
42
​
43
</html>