<h1>一括で同じ半径</h1>
<style>
#demo1 {
border-radius: 10px;
}
</style>
<div id="demo1" class="demo_bg">全部の角を半径10pxにする</div>
<h1>個別指定</h1>
<style>
#demo2_1 {
border-top-left-radius: 10px;
}
#demo2_2 {
border-top-right-radius: 20px;
}
#demo2_3 {
border-bottom-right-radius: 30px;
}
#demo2_4 {
border-bottom-left-radius: 40px;
}
</style>
<div id="demo2_1" class="demo_bg">左上10px</div>
<div id="demo2_2" class="demo_bg">右上20px</div>
<div id="demo2_3" class="demo_bg">右下30px</div>
<div id="demo2_4" class="demo_bg">左下40px</div>
<h1>別々の半径を一括指定</h1>
<style>
#demo3 {
border-radius: 40px 30px 20px 10px;
}
</style>
<div id="demo3" class="demo_bg">一括で半径を指定する</div>
<h1>楕円で指定</h1>
<style>
#demo4 {
border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;
/* 横の半径 / 縦の半径 */
}
</style>
<div id="demo4" class="demo_bg">横と縦の半径を変え、円弧を楕円にする</div>
<style>
.demo_bg {
background-color:#3C9;
padding:10px;
color:#FFF;
text-align: center;
border:solid 1px #555;
display: inline-block;
}
</style>