CSS: border-radius で、上だけ(下だけ)を角丸にする

CSS の border-radius プロパティを使用するとボックスの角を丸くすることができます。 さらに、角ごとに指定できるので、上だけを角丸にしたり、下だけを角丸にすることができます。

border-radius プロパティを指定する場合は、次のように指定します。


border-radius: 1px 2px 3px 4px; /* 左上、右上、右下、左下 */

border-radius

指定する順番は1番目が左上で、あとは時計回りの指定順となりますから、 「1番目が左上」とだけ憶えておけば大丈夫です。

上だけを角丸にする

上だけを角丸にする場合は、border-radius プロパティの 1番目と2番目に値を指定します。 3番目と4番目は 0 を指定します。


<div id="sample1"></div>
<style>
    #sample1{
        width: 200px;
        height: 50px;
        background-color: orange;
        border-radius: 10px 10px 0 0;
    }    
</style>

border-radius をまとめてではなく、個別に上だけを指定したい場合は次のように記述することもできます。


border-top-left-radius: 10px;
border-top-right-radius: 10px;

下だけを角丸にする

下だけを角丸にする場合は、border-radius プロパティの 3番目と4番目に値を指定します。 1番目と2番目は 0 を指定します。


<div id="sample2"></div>
<style>
    #sample2{
        width: 200px;
        height: 50px;
        background-color: orange;
        border-radius: 0 0 10px 10px;
    }    
</style>

border-radius をまとめてではなく、個別に下だけを指定したい場合は次のように記述することもできます。


border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

HTML・CSS入門