본문으로 바로가기

둥근 모서리

category 웹코딩HTML5 CSS3 9년 전


1 border-radius 속성

border-radius 를 적용하기전의 기본 html입니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<title>CSS3 border-radius</title>
<style>
 
body {
        font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
        font-size: 1em;
}
 
p {margin:0 auto; margin-top:20px;}
 
#rcorners1 {
        padding: 20px;
        width: 200px;
        height: 150px;
        background: #8ac007;
}
#rcorners2 {
        padding: 20px;
        width: 200px;
        height: 150px;
        border: 2px solid #8ac007;
}
 
</style>
</head>
 
<body>
<p id="rcorners1">Rounded corners1!</p>
<p id="rcorners2">Rounded corners2!</p>
 
</body>
</html>
실행화면 



스타일에 border-radius를 적용해보겠습니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<title>CSS3 border-radius</title>
<style>
 
body {
        font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
        font-size: 1em;
}
 
p {margin:0 auto; margin-top:20px;}
#rcorners1 {
        padding: 20px;
        width: 200px;
        height: 150px;
        background: #8ac007;
        border-radius: 25px;
}
#rcorners2 {
        padding: 20px;
        width: 200px;
        height: 150px;
        border: 2px solid #8ac007;
        border-radius: 25px;
}
 
</style>
</head>
 
<body>
 
<p id="rcorners1">Rounded corners1!</p>
<p id="rcorners2">Rounded corners2!</p>
 
</body>
</html>
실행화면

  • 첫번째 사각형은 border-radius와 background 색상을 같이 적용해 둥근모서리 효과를 내보았습니다
  • 두번째 사각형은 border-radius와 border를 같이 적용해 둥근테두리 효과를 내보았습니다


    • 2 모서리 위치 지정

    border-radius 속성의 값에 대해 하나의 속성값을 지정하는 경우, 4 모서리에 적용됩니다. 별도로 각 모서리를 지정할 수 있습니다. 규칙은 다음과 같습니다.
  • 4개의 값 : top-left, top-right, bottom-right, bottom-left 값을 지정합니다.
  • 3개의 값 : top-left, top-right와 bottom-left, 그리고 bottom-right 값을 지정합니다.
  • 2개의 값 : top-left와 bottom-right, top-right와 bottom-left 값을 지정합니다.
  • 1개의 값 : 모든 모서리에 균등한 값을 지정합니다.
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS3 border-radius</title>
    <style>
    body {
            font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
            font-size: 0.9em;
    }
    #rcorners4 {
            float:left;
            margin-right:15px;
            padding: 20px;
            width: 150px;
            height: 110px;
            background: #8ac007;
            border-radius: 15px 50px 30px 5px;
    }
    #rcorners5 {
            float:left;
            margin-right:15px;
            padding: 20px;
            width:150px;
            height: 150px;
            background: #8ac007;
            border-radius: 15px 50px 30px;
    }
    #rcorners6 {
            float:left;
            margin-right:15px;
            padding: 20px;
            width: 150px;
            height: 150px;
            background: #8ac007;
            border-radius: 15px 50px;
    }
    #rcorners7 {
            float:left;
            margin-right:15px;
            padding: 20px;
            width: 150px;
            height: 150px;
            background: #8ac007;
            border-radius: 50px/15px;
    }
    #rcorners8 {
            float:left;
            margin-right:15px;
            padding: 20px;
            width: 150px;
            height: 150px;
            background: #8ac007;
            border-radius: 15px/50px;
    }
    #rcorners9 {
            float:left;
            margin-right:15px;
            padding: 20px;
            width: 150px;
            height: 150px;
            background: #8ac007;
            border-radius: 50%;
    }     
    </style>
    </head>
     
    <body>
    <p>Four values - border-radius: 15px 50px 30px 5px:</p>
    <p id="rcorners4"></p>
     
    <p>Three values - border-radius: 15px 50px 30px:</p>
    <p id="rcorners5"></p>
     
    <p>Two values - border-radius: 15px 50px:</p>
    <p id="rcorners6"></p>
    <p>Elliptical border - border-radius: 50px/15px:</p>
    <p id="rcorners7"></p>
     
    <p>Elliptical border - border-radius: 15px/50px:</p>
    <p id="rcorners8"></p>
     
    <p>Ellipse border - border-radius: 50%:</p>
    <p id="rcorners9"></p>
    </body>
    </html>
    실행화면




     







    저작자표시 비영리 동일조건

    웹코딩HTML5 CSS3카테고리의 다른글

    HTM5에 새로 추가된 주요 태그들  (0) 2016.10.12
    HTML5의 시멘틱 태그  (0) 2016.10.12
    HTML5의 새 요소  (0) 2016.10.12
    텍스트 에디터  (0) 2016.09.16
    하위 브라우저에서 HTML5 표현되게 하기  (0) 2016.06.22
    댓글
    Coding Everyday
    블로그 이미지 webcooker 님의 블로그
    MENU
    CATEGORY
    VISITOR 오늘 / 전체

    티스토리툴바