ホーム(記事一覧)へ

CSSのborder-radiusで上だけ角丸にする方法

「border-radiusを使うと角丸にできるのは知ってるけど全部の角じゃなくて左上と右上だけ角丸にしたい!」

CSSのborder-radiusで上だけ角丸にする方法を解説します。

【結論】
border-radius:20px 20px 0 0

「20px」の部分は任意の数値にしてください。

<style>
.example{
    /*コレ*/border-radius: 20px 20px 0 0;
    width: 200px;
    height: 100px;
    border: 1px solid #999;
    margin: 10px;
    background: #ffbe42;
}
</style>
<div class="example"></div>

border-radiusは各角に対して数値を指定できます。

border-radius:左上 右上 右下 左下;の順です。

marginは上から時計回りです。それより少し左にずらし左上から時計回りと覚えましょう。

左上と右上に数値を指定し、右下と左下を0にすると上だけの角丸ができます。

ひとつだけの角丸

左上だけ角丸、といったことも可能です。

左上
border-radius: 20px 0 0 0

左下
border-radius: 0 0 0 20px
右上
border-radius: 0 20px 0 0

右下
border-radius: 0 0 20px 0;

上下左右の角丸

上だけ角丸にした方法同様、下だけ角丸も可能です。

border-radius: 20px 20px 0 0

border-radius: 20px 0 0 20px
border-radius: 0 0 20px 20px

border-radius: 0 20px 20px 0

まとめ

border-radius:左上 右上 右下 左下;の順で各角の値を指定可能です。

以上、CSSのborder-radiusで上だけ角丸にする方法でした。

関連記事