border-radius

different kinds of border-radius

HTML

<div class="box box1">.box1</div>
<div class="box box2">.box2</div>
<div class="box box3">.box3</div>
<div class="box box4">.box4</div>
<div class="box box5">.box5</div>
<div class="box box6">.box6</div>

CSS

.box1 {border-radius: 5px;}
.box2 {border-radius: 20px 40px;}
.box3 {border-radius: 10px 40px 10px 10px;}
.box4 {border-radius: 20px 10px / 40px 20px;}
.box5 {border-radius: 20px 0 40px 0;}
.box6 {border-radius: 20px / 40px;}

body {padding: 20px;}
.box {width: 100px;height: 70px;background-color: #a20000; 
    padding: 30px 0 0 0;
    margin: 0 20px 20px 0; float: left; text-align: center; 
    color: #fff; font-size: 20px; font-family: Verdana, sans-serif;}