cssで上だけ角丸を作る方法（border-radius上だけ）

2016年1月15日

とっつぁん

この記事は 3 分くらいで読めると思います

あとで読む

CSSで角丸を作る方法

人類がCSSで角丸を作れるようになって早数年が過ぎた…

割と今更ですが、とっつぁんは結構CSSの角丸を作るときに「上だけ」とか「右上だけ」とか指定しようとして書き方を忘れてることが多いので備忘録です（笑）

左上・右上・右下・左下すべてを角丸にする場合

※これ正直覚えなくていいです。

全部を角丸にする場合はとりあえずこう書きますよね。

border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

一か所だけ角丸にしたい場合

1か所だけ指定したい場合はこう…

左上のみ

border-top-left-radius : 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;

右上のみ

border-top-right-radius : 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;

左下のみ

border-bottom-left-radius : 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;

右下のみ

border-bottom-right-radius : 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;

firefox用の指定だけ微妙に書き方が違うじゃないですかメンドクサイ…

角丸をまとめて指定する方法

marginとかpaddingとかは上右下左という感じでまとめて指定できますよね？

角丸もこの書き方の方がラクです。

border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

こんな感じで書くことができます。

何故指定してる数字が / を挟んで4つあるかというと

水平方向に左上、右上、右下、左下 / 垂直方向に左上、右上、右下、左下

という感じの指定になるからです。

という事なので結構変形した角丸もこれなら作成できそうですね。

コピペ用、上だけ角丸にするCSS

ということで記事のタイトル通りborder-radiusを上だけ指定するとこんな感じです。

border-radius: 10px 10px 0 0 / 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0;