CSS3 border-radius いまさら聞いてすいません

FROGEGG | 2014/04/30 | CSS, Design | コメントはまだありません

CSSは専門外なので曖昧な事が多いですが少しづつ学びます!
という趣旨のシリーズです。

border-radius

何となく使っていたborder-radiusですが、理解が浅いのも気持ちが悪いので調べてみました。
border-radiusとは、角丸の距離を指定するプロパティです。

サンプルを作成して確認してみましょう。

実験してみる

分かりやすいように背景色をつけます。

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<style>
div.box-base {
        background-color:#52dff2;
        float:left;
        height:150px;
        margin:20px;
        width:150px;
}
    
div.box-radius {
        border-radius:30px;
}

</style>
</head>
<body>
<div class="box-base"></div>    
<div class="box-base box-radius"></div>
</body>
</html>

こんな感じです。
右側のboxに30pxの角丸が指定されています。

値を色々変えて実験してみましょう。
それぞれ縦に並べてみました。

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<style>
div.box-base {
        background-color:#52dff2;
        float:left;
        height:150px;
        margin:10px;
        width:150px;
}

div.box-radius-circle{
        border-radius:75px;
}

div.box-radius-halfcircle{
        border-radius:75px 75px 0 0;
        height:75px;        
}
    
div.box-radius-quartercircle{
        border-radius:150px 0 0 0;
        height:150px;
        width:150px;        
}
    
div.box-parent{
        *zoom:1;
}
    
div.box-parent:after{
        clear:both;        
        content:"";
        display:block;
}
</style>
</head>
<body>

    <h2>正円</h2>
    <div class="box-parent">
        <div class="box-base"></div>        
        <div class="box-base box-radius-circle"></div>            
    </div>

    <h2>半円</h2>
    <div class="box-parent">
        <div class="box-base"></div>        
        <div class="box-base box-radius-halfcircle"></div>            
    </div>
    
    <h2>扇</h2>
    <div class="box-parent">
        <div class="box-base"></div>        
        <div class="box-base box-radius-quartercircle"></div>            
    </div>    
    
</body>
</html>

こんな感じです。