2024-05-10

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

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

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

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

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

上だけを角丸にする

上だけを角丸にする場合は、border-radius プロパティの１番目と２番目に値を指定します。 ３番目と４番目は 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 プロパティの ３番目と４番目に値を指定します。 １番目と２番目は 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;