変わった形も簡単に生成できるborder-radiusジェネレーター「FANCY-BORDER-RADIUS」

FANCY-BORDER-RADIUSは、border-radius(角丸)の値を生成することができるジェネレーターです。

直感的な操作で、簡単にborder-radiusの値を取得できます。

FANCY-BORDER-RADIUSの使い方

FANCY-BORDER-RADIUSにアクセスして、四隅の角度を調整します。四角のつまみをドラッグ&ドロップすることで形状を変化させられます。

リアルタイムでborder-radiusの値が生成されるので、コピーして利用します。

コピーした値は、以下のようにborder-radiusの値として指定しましょう。

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ;

直感的にCSSが生成できて便利ですね。

ちょっと複雑な形状をborder-radiusで実装したい時は、ぜひご活用ください。