HTML/CSS DIV 모서리 라운드 처리

HTML/CSS DIV 모서리 라운드 처리

DIV 의 모서리를 라운드 처리하는 방법이다.

<style>

div.radius {

    width: 300px;

    height: 50px;

    border: 1px solid #000000;

    background: #CCCCCC;

    margin:10px;

    padding:10px;

}

div#rdiv1 { border-radius: 25px; }

div#rdiv2 { border-top-left-radius: 25px 15px; }

div#rdiv3 { border-top-right-radius: 25px 15px; }

div#rdiv4 { border-bottom-right-radius: 25px 15px; }

div#rdiv5 { border-bottom-left-radius: 25px 15px; }

div#rdiv6 { border-radius: 25px 25px 25px 25px / 15px 15px 15px 15px; }

div#rdiv7 { border-radius: 10px 15px 20px 25px; }

</style>

<div id="rdiv1" class="radius">rdiv1</div>

<div id="rdiv2" class="radius">rdiv2</div>

<div id="rdiv3" class="radius">rdiv3</div>

<div id="rdiv4" class="radius">rdiv4</div>

<div id="rdiv5" class="radius">rdiv5</div>

<div id="rdiv6" class="radius">rdiv6</div>

<div id="rdiv7" class="radius">rdiv7</div>

========== // 샘플

rdiv1

rdiv2

rdiv3

rdiv4

rdiv5

rdiv6

rdiv7

==========