Archipela / Dev / Border Radius生成

⬜ Border Radius生成

CSSの border-radius（角丸）を視覚的に調整します。シンプルな一括指定と四隅を個別に設定する詳細モードに対応し、楕円モードでブロブ状の形も作成できます。すべての処理はブラウザ内で完結します。

24px 

        

          
        

      

    


    
    

    

      

        
📘 使い方

        
    
          
  1. 「シンプル」モードでは1本のスライダーで全体の角丸を一括指定します。単位は px と % を切り替えられます（% は要素サイズに対する割合）。
    2. 
          
  2. 「詳細」モードでは左上・右上・右下・左下の四隅を個別に調整できます。
    3. 
          
  3. 「楕円モード」を有効にすると、各角の水平半径と垂直半径を別々に設定でき、a b c d / e f g h 形式のブロブ状の形が作れます。
    4. 
          
  4. プレビューを確認しながら、下の「生成されたCSS」を「CSSをコピー」で貼り付けます。
    5. 
        

      

      

        
❓ よくある質問

        

          
「/（スラッシュ）」の入った書式は何ですか？
            
楕円モードで出力される border-radius: a b c d / e f g h; は、スラッシュの前が各角の水平半径、後ろが垂直半径を表します。水平と垂直で異なる値にすることで、真円ではない有機的な角丸（ブロブ）を作れます。

          
% 指定と px 指定の違いは？
            
px は固定の長さで角を丸めます。% は要素の幅・高さに対する割合で丸めるため、正方形の要素に 50% を指定すると正円になります。レスポンシブに丸みを保ちたいときは % が便利です。

          
「葉っぱ」や「ブロブ」形はどう作りますか？
            
プリセットの「葉っぱ」「ブロブ」を選ぶと、対角の角だけを大きく丸めたり、楕円モードで各角の水平・垂直を非対称にした形が読み込まれます。そこからスライダーで微調整できます。

          
設定内容はサーバーに送信されますか？
            
いいえ。角丸の計算とCSS生成はすべてお使いのブラウザ内（クライアントサイド）で行われ、設定内容がサーバーへ送信・保存されることはありません。