ホーム
Tom Utilities

各角の CSS border-radius をピクセルまたはパーセントでプレビューし、コピーします。

使い方

Round the corners

Enter a value for each corner and choose pixels or percent. The preview updates as you type.

  1. Enter top-left, top-right, bottom-right and bottom-left values.
  2. Choose px or percent.
  3. Copy the border-radius declaration.

Percent units

Percentages are relative to the box size, so 50% on a square creates a circle and on a rectangle creates an ellipse.

よくある質問

Can corners differ?

Yes. Each corner has its own input, allowing asymmetric rounded shapes and leaf-like corners.

Does it support elliptical syntax?

The generated value uses the single-radius-per-corner form. Add a slash manually if you need horizontal and vertical radii.

関連ツール

CSS ボックスシャドウ生成 オフセット、ぼかし、広がり、色のスライダーでボックスシャドウを作成し、CSS をコピーします。 CSS グラデーション生成 線形または放射状の CSS グラデーションをライブプレビュー付きで作成し、CSS をコピーできます。 CSS フォーマッター 1行に1プロパティ、一貫したインデントで CSS を整形します。 UUID / GUID ジェネレーター ランダムなバージョン4 UUID を生成し、1つずつまたはまとめてコピーします。 ハッシュジェネレーター 任意のテキストの MD5、SHA-1、SHA-256、SHA-512 ダイジェストを計算します。 タイムスタンプ変換 Unix タイムスタンプ、ISO 8601、人間が読める現地日時の間で変換します。