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

2021年07月30日

「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にすると上だけの角丸ができます。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

上下左右の角丸

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

上だけ角丸

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: 20px 0 0 0

左下

border-radius: 0 0 0 20px

右上

border-radius: 0 20px 0 0

右下

border-radius: 0 0 20px 0;

まとめ

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

【上だけ】border-radius: 20px 20px 0 0
【左だけ】border-radius: 20px 0 0 20px
【下だけ】border-radius: 0 0 20px 20px
【右だけ】border-radius: 0 20px 20px 0

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。