今回の仕上がり
Fancy Border Radiusは、CSSの角の丸みを見ながら調整する道具です。Full-Control画面で左上の上辺のハンドルを右へ動かすと、横方向の最初の値が10%から38%へ変わりました。以下はその値を自作の四角へ適用した比較です。
ハンドルを動かして値を読む
- 公式ツールを開き、上部の「Full-Control」へ進みます。
- 8つの値が10%の初期状態から、左上の上辺にある白いハンドルを右へドラッグします。今回の結果は38%でした。
- 下部の値が「38% 10% 10% 10% / 10% 10% 10% 10%」になったことを確かめます。ドラッグ位置で値は変わります。
- COPYを押すとコピー完了の表示が出ました。ただし今回、クリップボードに保存された文字列の一致は確認できていません。確実に使うときは貼り付けた内容を別途確認します。
border-radius: 38% 10% 10% 10% / 10% 10% 10% 10%;border-radiusのスラッシュ前は横方向、後は縦方向です。同じパーセントでも、要素の幅・高さを変えると形は変わります。単に角をすべて同じ丸みにする指定とは分けて使います。
作者・利用条件・確認範囲
公式画面の作者表記はMirko様・Nils様、9elementsです。公式リポジトリはMITで、Copyright (c) 2018 9elementsの許諾文全文を保存しました。ソフトウェアを複製・組み込む場合は著作権・許諾表示を残します。このページの自作比較HTMLはCC0です。
2026年10月17日、PCブラウザでFull-Controlへの移動、ハンドルの調整、出力値、COPYの完了表示を確認しました。今回の操作に登録・支払い・インストールは不要でした。スマホ実機、全ハンドル、キーボードだけでの編集、クリップボード保存の一致、AI利用の有無は未確認です。新作・流行・個人開発とは断定しません。