物の角を丸くするborder-radiusプロパティ

2015年6月24日

<div><section>などブロックレベル要素に
背景色をつけたとき、その角は直角です。
この角をborder-radiusプロパティを使って丸く
表示することができます。角丸の形の値は、水平方向と
垂直方向の半径の長さで計算されます。四角の各かどは個別に
設定する方法と、まとめて設定する方法があります。

プロパティ	内容
border-top-left-radius	左上の角丸を設定。
border-top-right-radius	右上の角丸を設定。
border-bottom-left-radius	左下の角丸を設定。
border-bottom-right-radius	左右の角丸を設定。
border-radius	４箇所の角丸をまとめて設定。

値	内容
数値(整数)	半径の長さをpxで設定。
%	半径を%を設定。

    *{margin:0;padding:0;}
    
    #container{
        width:640px;    
        height:400px;
        background-color:#f0f0f0;
        margin:0 auto;
    }
    .box{
        margin:8px;
        width:120px;
        height:120px;
        background-color:aquamarine;
    }
    .fleft{float:left;}
    .clearBoth{clear:both;}

    .bradius02{border-radius:2px;}
    .bradius04{border-radius:4px;}
    .bradius08{border-radius:8px;}
    .bradius16{border-radius:16px;}
    .bradius32{border-radius:32px;}

    .bradiusTL{border-top-left-radius:16px;}
    .bradiusTR{border-top-right-radius:16px;}
    .bradiusBL{border-bottom-left-radius:16px;}
    .bradiusBR{border-bottom-right-radius:16px;}

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:#f0f0f0;

margin:0 auto;

}

.box{

margin:8px;

width:120px;

height:120px;

background-color:aquamarine;

}

.fleft{float:left;}

.clearBoth{clear:both;}

.bradius02{border-radius:2px;}

.bradius04{border-radius:4px;}

.bradius08{border-radius:8px;}

.bradius16{border-radius:16px;}

.bradius32{border-radius:32px;}

.bradiusTL{border-top-left-radius:16px;}

.bradiusTR{border-top-right-radius:16px;}

.bradiusBL{border-bottom-left-radius:16px;}

.bradiusBR{border-bottom-right-radius:16px;}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="box bradius02 fleft">border-radius<br> 2px</div>
    <div class="box bradius04 fleft">border-radius<br> 4px</div>
    <div class="box bradius08 fleft">border-radius<br> 8px</div>
    <div class="box bradius16 fleft">border-radius<br>16px</div>
    <div class="box bradius32 fleft">border-radius<br>32px</div>
    
    <div class="box bradiusTL clearBoth fleft">topleft<br>16px</div>
    <div class="box bradiusTR fleft">topRight<br>16px</div>
    <div class="box bradiusBL fleft">bottomleft<br>16px</div>
    <div class="box bradiusBR fleft">bottomRight<br>16px</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

<div class="box bradius02 fleft">border-radius<br> 2px</div>

<div class="box bradius04 fleft">border-radius<br> 4px</div>

<div class="box bradius08 fleft">border-radius<br> 8px</div>

<div class="box bradius16 fleft">border-radius<br>16px</div>

<div class="box bradius32 fleft">border-radius<br>32px</div>

<div class="box bradiusTL clearBoth fleft">topleft<br>16px</div>

<div class="box bradiusTR fleft">topRight<br>16px</div>

<div class="box bradiusBL fleft">bottomleft<br>16px</div>

<div class="box bradiusBR fleft">bottomRight<br>16px</div>

</body>

</html>