CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。
Corner Radius
12px
12px
12px
12px
CSS
border-radius: 12px;
CSSボーダーラディウスジェネレーターの使い方
- 1プレビューボックスの各コーナーのボーダーラディウススライダーを調整します。
- 2すべてのコーナーをリンクして均等な丸角にするか、アンリンクして個別に制御します。
- 3ボーダーラディウスの効果をリアルタイムでプレビューします。
- 4生成されたCSS border-radiusコードをコピーします。
Zenovayアナリティクス
関連ツール
CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。CSSグリッドジェネレータ
ビジュアルエディタでCSSグリッドレイアウトを構築します。列、行、隙間を定義し、セルを複数のエリアにまたがらせることができます。よくある質問
CSSのborder-radiusはどのように機能しますか？▾
border-radiusプロパティは要素の角を丸めます。すべての角に単一の値を設定することも、左上、右上、右下、左下の各角を個別に指定することもできます。
各角に異なる値を設定できますか？▾
はい。リンクアイコンをクリックして角のリンクを解除し、各角を個別に調整できます。これにより、吹き出しやタブのような非対称な形状を作成できます。
border-radiusはどのような単位をサポートしていますか？▾
border-radiusはCSSの長さの単位をサポートしています。このツールはピクセル（px）を使用しますが、パーセント（%）を使用することもできます。正方形の要素に50%を設定すると完全な円になります。
完全な円を作るにはどうすればよいですか？▾
4つの角の値をすべて50%（または要素の幅/高さの半分のピクセル値）に設定します。真の円にするには要素が正方形である必要があります。
スマートフォンでこのツールを使えますか？▾
はい、ボーダーラジアスジェネレーターは最新のモバイルブラウザで動作します。スライダーで角の値を調整して、どのデバイスでもCSSをコピーできます。
生成されたCSSはすべてのブラウザで動作しますか？▾
はい。border-radiusプロパティはChrome、Firefox、Safari、Edgeを含むすべての最新ブラウザでサポートされています。ベンダープレフィックスは不要です。
生成されたCSSをTailwindで使用できますか？▾
はい。TailwindにはrounroundroundtroundetroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedroundedLgやroundedFullなどの組み込みボーダーラジアスユーティリティがあります。カスタム値には、rounded-[12px_24px_12px_24px]のような任意値構文を使用するか、CSSをカスタムクラスに直接記述してください。