Toolipedia 埋め込み
JA
← すべてのテキストツール

CSS border-radiusジェネレーター

スライダーで各角を丸め、border-radiusのCSSをコピーできます。

  • 無料
  • 登録不要
  • どの端末でも使える

約CSS border-radiusジェネレーター

スライダーで角を1つずつ丸め、形がすぐに変わる様子を見ながら、border-radiusの行をコピーできます。正方形に50%を指定すると円になり、長方形にとても大きなピクセル値を指定するとピル型になります。スラッシュを使った8値の構文では、楕円形でブロブのような角も作れます。

CSS border-radiusジェネレーターの使い方

  1. 各角のスライダーをドラッグして、その半径を設定してください。
  2. ライブプレビューを見て、形を確認してください。
  3. border-radiusのCSSの行をコピーしてください。

このツールを使う理由

別名

よくある質問

CSSで真円を作るにはどうしますか?

要素の幅と高さを同じにして、border-radiusを50%に設定します。辺の長さが等しくないと、円ではなく楕円になります。

1つの角だけを丸くするにはどうすればよいですか?

ほかの3つの角をゼロに設定して、必要な1つだけを上げてください。生成されたCSSには、角の4つの値が、固定された順序で並びます。

半径には、ピクセルとパーセントのどちらを使うべきですか?

ピクセルは、どのボックスでも同じ角のサイズになります。パーセントは要素に合わせてスケールするため、幅の広いボックスが引き伸ばされたように見えることがあります。統一感のあるボタンやカードには、ピクセルを使ってください。

CSS border-radiusジェネレーターは無料ですか？

はい。ToolipediaのCSS border-radiusジェネレーターは無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

CSS border-radiusジェネレーター を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール