このツールについて
角丸はインターフェースの雰囲気を決め、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つで済むためです。