JA
PortuguêsEnglishEspañolDeutschFrançaisItaliano日本語Русский中文
ホーム お気に入り
Voltar

CSS border-radiusジェネレーター

ライブプレビュー付きで、CSSの角丸を作ります。各角を調整したり、4つの角をまとめて操作したり、border-radiusの8つの値で有機的な形(ブロブ)も作れます。

使い方

border-radiusとブロブのジェネレーター

利用できる言語: PortuguêsEspañolEnglishDeutschFrançaisItaliano日本語Русский中文

次のツールCSSボタンジェネレーター→
広告

CSS border-radiusジェネレーター: 用途

4つの角をまとめて、または個別に、pxまたは%で調整すると、形がすぐに変わります。ブロブモードでは、水平と垂直の半径を使って有機的な形を作り、ランダムなバリエーションも生成できます。CSSはコピーするだけで使えます。

使い方

  1. 角かブロブを選びます。
  2. スライダーを調整します。
  3. 生成されたCSSをコピーします。

使うタイミング

  • 角丸のボタンやカードを作る。
  • 背景用の有機的な形を作る。
  • border-radiusの構文を学ぶ。

よくある質問

一部の角だけ丸めるには?

同じ角のオプションをオフにして、各角を調整します。CSSでの順序は、左上、右上、右下、左下です。

有機的な形(ブロブ)を作るには?

ブロブモードを使います。30% 70% 70% 30% / 30% 30% 70% 70% のようなスラッシュ付きの構文を使い、スラッシュの前の値が水平方向の半径、後ろが垂直方向の半径です。

本当に無料?

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール:Tools123は無料です。

関連ツール

ご支援ありがとうございます!

寄付はサイトの維持に役立ちます。ツールはみなさんの役に立つよう作っていますが、サーバー費用がかかります。ご支援いただけるととても助かります。金額を選択または入力してください:

Stripeによる安全な決済。別のタブで開きます。

ツールは現状のまま、保証なしで提供されます。結果やその利用について責任を負いかねます。