メインコンテンツにスキップ

ボックスの外観:角丸を設定する

ボックスの角を丸くする「角丸」機能について紹介します。角丸を50%に設定すると、要素を正円に成形できます。

スクリーン上のハンドルで調整する方法

ボックス選択枠内のアンカーポイント(調整ハンドル)をドラッグして、角丸を設定できます。

右パネルのボックスタブで設定する方法

  1. 角丸を変更したいボックスを選択します。 複数ボックスを選択する場合は、Shiftを押しながら複数のボックスをクリックします。

    スクリーンショット:ボックスを選択する様子。
  2. 右パネルで[ボックス]タブを選択します。

    パネルが閉じている場合は、右パネルを開いてください。

  3. [外観]メニューの[角丸]フィールドに数値を入力して、角丸の設定をします。

    数値フィールド右のアイコンをクリックすると、一括編集と個別編集の切り替えができます。


便利なショートカット

  • Shiftキーを押しながらアンカーポイントを動かすと、10の倍数で数値が変化します。

  • option(WindowsではAlt)キーを押しながらアンカーポイントを操作すると、一括編集と個別編集を切り替えられます。


画像を正円にする

角丸を50%に設定すると、要素を正円に成形できます。


border-radius radius 楕円 丸み

こちらの回答で解決しましたか?