CSS: border-radius で正円を描く

CSS3 では border-radius プロパティを使って正円を描くことができます。

まず正方形を用意して、正方形の長さの半分の値を border-radius の値として 指定します。下で具体的に見ていきましょう。

正方形を用意する

まず長さと高さが「100px」の正方形を作ります。


<div id="sample1"></div>
<style>
    #sample1 {
        width: 100px;
        height: 100px;
        background-color: darkblue;
    } 
</style>


border-radius を指定する

次に長さと高さ 100px の半分の値、「50px」を border-radius の値として指定します。 下に表示されているように、これだけで簡単に正円ができます。


<div id="sample2"></div>
<style>
    #sample2 {
        width: 100px;
        height: 100px;
        background-color: darkblue;
        border-radius: 50px;
    } 
</style>


先程とはサイズの違う正円を描いてみます。 今回は高さと幅が「50px」の正方形から正円を作ります。 50px の半分の値、「25px」を border-radius の値に指定します。


<div id="sample3"></div>
<style>
    #sample3 {
        width: 50px;
        height: 50px;
        background-color: darkred;
        border-radius: 25px;
    } 
</style>


HTML・CSS入門