Help us understand the problem. What is going on with this article?

【初心者でもわかる】一部だけ角丸をつける方法(border-radius)

どうも、7noteです。今回は一部に角丸をつけたいときの方法を全パターン紹介。

左上だけ

border-radius: 10px 0 0 0 / 10px 0 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-left-radius: 10px;

右上だけ

border-radius: 0 10px 0 0 / 0 10px 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-right-radius: 10px;

右下だけ

border-radius: 0 0 10px 0 / 0 0 10px 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-bottom-right-radius: 10px;

左下だけ

border-radius: 0 0 0 10px / 0 0 0 10px; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-bottom-left-radius: 10px;

上だけ(左上と右上)

border-radius: 10px 10px 0 0 / 10px 10px 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;

右だけ(右上と右下)

border-radius: 0 10px 10px 0 / 0 10px 10px 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;

下だけ(右下と左下)

border-radius: 0 0 10px 10px / 0 0 10px 10px; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

左だけ(左上と左下)

border-radius: 10px 0 0 10px / 10px 0 0 10px; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;

円(正方形なら正円になる)

border-radius: 50%;

ベンダープレフィックスについて

2020年現在では、各種ブラウザに対応させるためのベンダープレフィックスですが、border-radiusには必要ないとされているようです!

参考(https://qiita.com/amamamaou/items/42197e443134478befaf)

まとめ

覚え方は、左上から時計回りで覚えます。

左上→右上→右下→左下

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)

7note
フロントエンジニア4年目。4〜5人ほど後輩の育成経験もあり。HTML・CSS初心者向けにわかりやすい記事を意識して書いていきます!目標毎日更新。自社開発を中心にWEBサイト制作を行っています。約40件のHP制作経験あり。Wordpressで独自テーマの開発などもちょこちょこやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away