角丸ジェネレーター 🔒 ブラウザ内で完結 — 何もアップロードされません。

角丸や有機的なブロブ形状を作って CSS をコピー。

16px

プレビュー

   

このツールについて

角丸はインターフェースの雰囲気を決め、border-radius は単一の均一な値以上のことができます。このジェネレーターは各角を個別に丸められ、8値の水平/垂直構文をフルに使って、ただの長方形には見えない柔らかく有機的な「ブロブ」形状を作れます。

スライダーをドラッグして形状がライブで更新される様子を見ながら、border-radius の CSS をコピー。すべてブラウザ内で動作します。

よくある質問

「リンク」モードと「角ごと」モードの違いは何ですか?

リンクモードは4つの角すべてに同じピクセル単位の半径を適用します。チェックを外すと角ごとモードになり、各角に独立した水平・垂直のパーセント値を設定できます。

楕円形(真円でない)の角を作れますか?

はい。角ごとモードに切り替えて水平・垂直に異なるパーセント値を設定してください。CSSのborder-radiusは各角に2つの半径を指定でき、このツールはその両方を操作できます。

完全な円やピル形状はどう作りますか?

円を作るには、統一半径を要素の幅・高さの50%に設定します(または角ごとモードで水平・垂直とも50%に)。ピル形状にするには、半径を要素の高さの半分以上に設定してください。

作成したデザインはどこかにアップロードされますか?

いいえ。プレビューのボックスと生成されるCSSは、あなたのブラウザ内だけでローカルに計算されます。

なぜ出力されるCSSにスラッシュ(/)が入ることがあるのですか?

スラッシュは水平半径と垂直半径を区切るものです(`border-radius: h1 h2 h3 h4 / v1 v2 v3 v4`)。これは角ごとモードでのみ現れます。リンクモードでは値が1つで済むためです。