border-radiusって8か所指定できるんですね。

k.miki

こんにちは。株式会社るーぷのコーダー、三木と申します。

夏はできるだけお外歩きたくないです。
ほら、僕って虫ダメな人じゃないですか。
中でも圧っっっっっ倒的に苦手な虫が、「セミ」なんですね。

まず、あの重厚なボディ。あのWeightで飛行されたら危ない。怖い。やめて。
しかも飛びながら「ﾐ゛ﾐ゛ﾐ゛ﾐ゛ﾐ゛ﾐ゛!!!!!!!」って言うやん？？？なんで？？？？？？？？？？？？？？？？？？？？？？？？？怖い言うてるやん…

さて、今回もジェネレーターを紹介いたします。

なんとこのツール、4つの角をマウスでドラッグしてｳﾆｮｳﾆｮできます。

個人的に非常に使いやすくて感動いたしました。
widthとheightの指定。そしてpxと%の表示切替もできます。

実は入社してからごく最近までたまたま、「ジェネレーター探そ。」と思うほど
難しいborder-radiusの使い方をしてきませんでした。

今回ついにジェネレーターのお世話になり、その時知ってしまったのが

border-radius: 50px 50px 50px 50px / 25px 25px 25px 25px;

この表記。

今まで私は

border-radius: 10px 10px 0 0;

ﾌｯ…これで左上右上だけ角丸だぜ…と満足していました。
超格好良いっすね。

clip-pathで八角形とか作るときと似た要領かぁ。と思いましたが

clip-pathよりも順番が覚えづらいので、しばらくはこのジェネレーターのお世話になろうと思います。

それでは、失礼いたします。