CSS角丸ジェネレーター
ライブプレビューを見ながらCSSのborder-radiusを視覚的に作成し、すぐ使えるコードをコピーできます。
プレビュー
コーナーのハンドルをドラッグ
CSS
border-radius: —;
100%プライベート — すべてブラウザ内で動作します。アップロードは一切ありません。
角
すべての角
px
px
要素
プリセット
CSS角丸ジェネレーターについて
CSS Border Radius Generatorは、柔らかく丸みを帯びたカードから有機的なブロブ形状まで何でも作り出します。プレビュー上で角のハンドルを直接ドラッグするか、各角を数値で設定できます。すべての角に水平・垂直それぞれ別の半径を指定する8値構文にも対応しています。この2つ目の軸こそが、卵形、葉っぱ形、涙形、ブロブ形を生み出す鍵です。
link-cornersトグルは4つの角すべてを連動させ、古典的な均一な丸みを実現します。リンクを解除すれば、各角が個別に非対称な形状を作れるようになります。rounded、pill、circle、squircle、2種のブロブ、leaf、egg、arch、teardrop、petal、waveという12個のプリセットがこのプロパティの可能性を示し、ランダム化ボタンで新鮮な有機的形状を無限に生成できます。
単位を変更したり、要素とキャンバスの色をデザインに合わせて変えたり、border-radiusの値そのもの、または完全なCSSルールをコピーしたりできます。このツールは100%クライアントサイドで動作し、アップロードは一切ありません。
CSS角丸ジェネレーターの使い方
- プレビュー上で角のハンドルをドラッグするか、「すべての角をリンク」をオフにして各角を個別に編集します。
- 有機的なブロブ形状を作るために、角ごとに水平・垂直の半径を設定します。
- 単位を選び、要素と背景の色を調整して実際のコンテキストでプレビューします。
- pill、squircle、blob、leaf、teardropなどのプリセットを試すか、ランダム化ボタンを押します。
- border-radiusの値、または完全なCSSをコピーします。
よくある質問
スラッシュの前の値は4つの角の水平方向の半径、後ろの値は垂直方向の半径です。角ごとにこの2つの軸を異ならせることで、ただの角丸ボックスが卵形、葉っぱ形、ブロブ形に変わります。
正円にするには、正方形の要素にborder-radius: 50%を使います。ピル形にするには、任意の長方形に高さの半分以上の半径を設定します。circleとpillのプリセットはどちらも瞬時に設定してくれます。
はい。border-radiusは背景画像を含む要素のボックスをクリップし、overflow: hiddenはそのクリップを子コンテンツにも及ぼします。img要素にブロブの半径を適用するのは、有機的な写真マスクを作る手早い方法です。
はい。両方の状態の単位が一致していれば、border-radiusはCSSトランジションで滑らかに補間されます。ホバー時に2つのブロブ値の間をアニメーションさせるのは、人気の有機的なモーフィング効果です。ここで両方の状態を生成し、その間をトランジションさせられます。
はい、完全に無料でプライベートです。ブラウザ内でのみ動作し、アカウントもデータの送信も一切ありません。
人気の検索
CSS 角丸 ジェネレーター
border-radius ジェネレーター
おしゃれな 角丸 ジェネレーター
CSS 角丸 作成 ツール
border-radius CSS オンラインツール
楕円 border-radius ジェネレーター
CSS ブロブ 形状 ジェネレーター
border-radius プレビュー ツール
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。