CSS ボーダー半径ジェネレータ

CSS ボーダー半径ジェネレータの機能

• 01

  均一モードと単位ごとのモード

  均一モードはすべての角に 1 つの半径を適用します。単位ごとのモードは、左上、右上、右下、左下を独立して制御します——錠剤、葉、非対称タグの形状は数クリックで実現可能です。

• 02

  楕円（X/Y）角

  楕円モードを切り替えて、各角に水平と垂直の半径を指定します——有機的な blob 形状に対応する CSS が対応する構文です。

• 03

  3 つのユニット

  px、%、rem の間を切り替えます。パーセント値はボックスでスケーリングする真の楕円を作成します。rem 値はアクセシビリティのためにルートフォントサイズを追跡します。

CSS ボーダー半径ジェネレータのよくある質問

px と % の違いは？

ピクセル半径は絶対値です——16px コーナーは常に 16px です。パーセント半径は要素の幅と高さに相対的なので、50% は正方形のボックスで完全な円を作成し、長方形で楕円を作成します。

楕円モードをいつ使用する必要がありますか？

一方の軸でより多く膨れる角が必要な場合は楕円モードを使用します——たとえば、水平錠剤（50%/100%）またはリーフのような blob 形状。CSS はこれを `左上-x 右上-x ... / 左上-y 右上-y ...` として表現します。

非正方形ボックスでパーセント半径が間違って見える理由は？

ボーダー半径のパーセントは対応する辺に相対的です。水平パーセントは幅に相対的、垂直は高さに相対的。幅の広い短いボックスでは、これはコーナーが完全な弧ではなく楕円に伸びることを意味します。

出力はすべてのブラウザで機能しますか？

はい——ボーダー半径と楕円構文は Safari、Firefox、Edge、Chrome のすべての常緑版を含むすべてのモダンブラウザで対応しています。