Border Radius ジェネレーター
CSSのborder-radiusをビジュアルにデザイン:pxまたは%単位で独立した四隅のスライダーを操作し、全角リンクショートカットで瞬時に円やピル型を作成、さらにランダムな形状を生成する有機的なブロブモードも搭載。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
border-radius宣言は、最大で4つの独立した角の値と、有機的な曲線のためのオプションの8値スラッシュ構文を受け入れます。これは、単純な角丸カード以上のものが必要になるまで、多くの人が気づかない可動部分の多さです。このジェネレーターは、それらすべての部品を画面上に配置します:各々がpxまたはパーセント単位を持つ4つのコーナースライダー、対称形状のための全角リンクショートカット、そして単一の半径値では表現できない形状のためのブロブモードです。
コーナーモードは、人々が実際に求める形状をカバーします。すべての角を1つのスライダーにリンクして完璧な円、ピル、スクワークルを作るか、リンクを解除して、ドロップダウンパネルの上部だけを丸めたり、カードの片面だけを丸めたりできます。形状の背後にあるチェッカーボードプレビューは、明るい背景と暗い背景を切り替え可能で、どの角がどの半径でクリップされるかを正確に示します。これは、このサイトのファイルツールが透明性を示すために使用しているのと同じ視覚的トリックです。
ブロブモードはもう半分です。CSSの8値スラッシュ構文により、各角の水平半径と垂直半径を異ならせることができ、それが角丸長方形を有機的で不規則な輪郭に変えます。いつでもランダマイズで新鮮な形状を生成し、その背後にある正確なCSSをコピーしてください。SVGエクスポートや外部ライブラリは不要です。プリセットページは、人々が実際に検索ボックスに入力するリクエストをカバーしています:完璧な円、スタジアム型のピルボタン、iOSスタイルのスクワークル、そして既製の有機的ブロブです。
このサイトのすべてのツールと同様に、完全にブラウザ内で動作します。アップロードは不要で、アカウントも必要なく、ページが一度読み込まれればジェネレーターはオフラインでも動作し続けます。