• 코드:
​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 {
9
            height: 100px;
10
            width: 200px;
11
            background: #87CEFA;
12
            padding: 20px;
13
        }
14
        #p_01 { border-radius: 20px 40px 60px 80px; }
15
        #p_02 { border-radius: 20px 40px 60px; }
16
        #p_03 { border-radius: 20px 40px; }
17
        #p_04 { border-radius: 20px; }
18
    </style>
19
</head>
20
​
21
<body>
22
​
23
    <h1>모서리별로 다른 크기의 둥근 모서리 설정</h1>
24
    <p id="p_01">border-radius 속성값이 4개일 때 결과입니다!</p>
25
    <p id="p_02">border-radius 속성값이 3개일 때 결과입니다!</p>
26
    <p id="p_03">border-radius 속성값이 2개일 때 결과입니다!</p>
27
    <p id="p_04">border-radius 속성값이 1개일 때 결과입니다!</p>
28
​
29
</body>
30
​
31
</html>