chevron_right

Border Radius ジェネレーター

コーナーの丸みを視覚的にコントロールしてCSSをコピーします。

プリセット

単位

px%

すべてのコーナーをリンク

Top Left: 12px

Top Right: 12px

Bottom Right: 12px

Bottom Left: 12px

生成されたCSS

border-radius: 12px;

関連ツール

CSS Clip-Path ジェネレーター

ライブプレビューでCSS clip-path形状を生成します。

Box Shadow ジェネレーター

CSSボックスシャドウをリアルタイムプレビューで視覚的に作成します。

Gradient Border Generator

Generate CSS for gradient borders with adjustable angle and width.

CSS Grid ジェネレーター

ライブプレビューを見ながらレスポンシブな CSS Grid レイアウトを作成できます。

PDFからJPG

PDFページを高品質なJPG画像に変換します。

Tailwind Color Generator

Generate a Tailwind-style color scale and config snippet from a base color.

CSS キーフレーム生成ツール

ライブプレビューを見ながら、カスタム CSS キーフレームを視覚的に作成してそのままコピーできます。

apps

無料オンラインツールの全コレクションを見る。

数値を当てずに角の丸みを調整

border-radius は簡単そうに見えて、ただの角丸四角形以上の形を作ろうとすると意外に調整が大変です。このジェネレーターなら各コーナーを視覚的に動かしながら結果を確認できるので、ボタン、カード、入力欄などの微調整がしやすくなります。

このツールで調整できること

border-radius の代表的な使い方をすばやく試せます。

すべての角に同じ値を使う
各角に別々の値を設定する
px と % を切り替える
よくある形をプリセットから選ぶ

こんな場面で便利です

このツールは次のようなときに役立ちます。

既存のデザインシステムに近づけたいとき
ピル型、円形、より有機的な角形を試したいとき
ボタンやカード用の再利用しやすい CSS を作りたいとき
devtools での試行錯誤を減らしたいとき

単位の違いで見え方も変わります

px は固定の丸みになり、% は要素サイズの影響を受けやすくなります。あるコンポーネントではちょうどよくても別の場所では違和感があるなら、単位を切り替えて見比べるのがおすすめです。