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

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

Studioでは、ボックスの角を丸くする「角丸」機能があります。デザインに柔らかさを加えたり、特定の要素を強調したりできます。

今日アップデートされました

ボックスに角丸を設定する

スクリーン上のアンカーポイント(調整ハンドル)を使用する

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

ボックスタブを使用する

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

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

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

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

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


便利なショートカット

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

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

画像を正円にする

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


border-radius radius 楕円 丸み

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