toolbox/border-radius.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free CSS Border Radius Generator — Visual Rounded Corners</title>
  <meta name="description" content="Create CSS border-radius with a visual editor. Individual corner control, preview, and instant CSS code. Free online border radius generator.">
  <link rel="canonical" href="https://www.quicktools.mom/border-radius.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/border-radius.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"🎨 Preset Shapes


    Ad Space — 336×280

          <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Border Radius Generator</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Border Radius Generator is a free, browser-based tool built for developers, content creators, and marketers. Create CSS border-radius with a visual editor. Individual corner control, preview, and instant CSS code. Free online border radius generator. This tool processes everything locally using JavaScript — no data is uploaded to any server, no account is required, and there are no usage limits. Whether you’re working on a quick project or handling sensitive data, your privacy is fully protected. Bookmark this page and use it anytime — it works on desktop, tablet, and mobile devices.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li><strong>Enter your data</strong> — Type, paste, or upload your input in the fields above.</li>
        <li><strong>Configure options</strong> — Adjust any settings or parameters to match your requirements.</li>
        <li><strong>Get instant results</strong> — Output updates automatically in real-time as you type.</li>
        <li><strong>Copy or download</strong> — Use the Copy button to grab results, or download if available.</li>
      </ol>
    </div>
    Frequently Asked Questions
      What is border-radius?","acceptedAnswer":{"@type":"Answer","text":"The CSS border-radius property rounds the corners of an element. You can set all corners equally or control each corner individually. Values can be in px, %, em, or rem."}},{"@type":"Question","name":"How do I make a circle?","acceptedAnswer":{"@type":"Answer","text":"Set border-radius to 50% on a square element. If the element is rectangular, 50% creates an ellipse instead."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space — 728×90</div>
    <div class="tool-header">
      <div class="tool-badge">🎨 Design</div>
      <h1>Border Radius Generator</h1>
      <p>Design CSS border-radius visually with individual corner control and live preview.</p>
    </div>
    <div class="tool-card">
      <div style="display:flex;gap:2rem;flex-wrap:wrap;align-items:start;">
        <div style="flex:1;min-width:250px;">
          <label class="toggle-wrapper mb-2"><input type="checkbox" id="linkCorners" checked onchange="sync()"> Link all corners</label>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
            <div><label style="font-size:0.8rem;">Top-Left: <strong id="tlVal">20</strong>px</label><input type="range" min="0" max="150" value="20" id="tl" oninput="update(this)"></div>
            <div><label style="font-size:0.8rem;">Top-Right: <strong id="trVal">20</strong>px</label><input type="range" min="0" max="150" value="20" id="tr" oninput="update(this)"></div>
            <div><label style="font-size:0.8rem;">Bottom-Left: <strong id="blVal">20</strong>px</label><input type="range" min="0" max="150" value="20" id="bl" oninput="update(this)"></div>
            <div><label style="font-size:0.8rem;">Bottom-Right: <strong id="brVal">20</strong>px</label><input type="range" min="0" max="150" value="20" id="br" oninput="update(this)"></div>
          </div>
          <div class="controls-row mt-3">
            <div class="control-group"><label>Unit</label><select id="unit" onchange="updatePreview()"><option value="px" selected>px</option><option value="%">%</option><option value="rem">rem</option></select></div>
            <div class="control-group"><label>Background</label><input type="color" id="previewBg" value="#6366f1" onchange="updatePreview()" style="width:50px;height:32px;border:none;cursor:pointer;"></div>
            <div class="control-group"><label>Size</label><select id="previewSize" onchange="updatePreview()"><option value="200">200px</option><option value="250" selected>250px</option><option value="300">300px</option></select></div>
          </div>
        </div>
        <div style="flex-shrink:0;text-align:center;">
          <div id="previewBox" style="width:250px;height:250px;background:#6366f1;transition:all 0.3s;border:2px solid rgba(255,255,255,0.1);"></div>
        </div>
      </div>
      <div class="output-area mt-3">
        <span class="output-label">CSS</span>
        <pre id="cssOutput" style="font-size:0.9rem;"></pre>
        <button class="copy-btn" onclick="copyCSS()">Copy</button>
      </div>
    </div>
    <div class="tool-card">
      <h3 style="font-size:0.95rem;margin-bottom:1rem;">🎨 Preset Shapes</h3>
      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:0.75rem;" id="presetShapes"></div>
    </div>
    <div class="ad-zone">Ad Space — 336×280</div>
    <div class="faq-section">
      <h2>Frequently Asked Questions</h2>
      <div class="faq-item"><h3>What is border-radius?</h3><p>The CSS border-radius property rounds the corners of an element. You can set all corners equally or control each corner individually. Values can be in px, %, em, or rem.</p></div>
      <div class="faq-item"><h3>How do I make a circle?</h3><p>Set border-radius to 50% on a square element. If the element is rectangular, 50% creates an ellipse instead.</p></div>
    </div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid">
      <a href="css-shadow.html"><span class="tool-icon">🌑</span> Box Shadow Generator</a>
      <a href="gradient-generator.html"><span class="tool-icon">🌈</span> Gradient Generator</a>
      <a href="color-converter.html"><span class="tool-icon">🎨</span> Color Converter</a>
      <a href="aspect-ratio.html"><span class="tool-icon">📐</span> Aspect Ratio</a>
    </div></div>
    <div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
  </div>
  <script>
    const presets=[
      {name:'Rounded',tl:20,tr:20,bl:20,br:20},{name:'Pill',tl:100,tr:100,bl:100,br:100},
      {name:'Circle',tl:50,tr:50,bl:50,br:50},{name:'None',tl:0,tr:0,bl:0,br:0},
      {name:'Top Only',tl:20,tr:20,bl:0,br:0},{name:'Bottom Only',tl:0,tr:0,bl:20,br:20},
      {name:'Left Only',tl:20,tr:0,bl:20,br:0},{name:'Right Only',tl:0,tr:20,bl:0,br:20},
      {name:'Blob',tl:60,tr:20,bl:20,br:60},{name:'Leaf',tl:0,tr:60,bl:60,br:0},
      {name:'Drop',tl:50,tr:50,bl:0,br:50},{name:'Shield',tl:50,tr:50,bl:25,br:25},
    ];

    document.getElementById('presetShapes').innerHTML=presets.map((p,i)=>{
      const r=`${p.tl}px ${p.tr}px ${p.br}px ${p.bl}px`;
      return`<div style="text-align:center;cursor:pointer;" onclick="applyPreset(${i})">
        <div style="width:50px;height:50px;margin:0 auto 0.4rem;background:var(--accent);border-radius:${r};transition:border-radius 0.3s;"></div>
        <span style="font-size:0.7rem;color:var(--text-secondary);">${p.name}</span></div>`;
    }).join('');

    function applyPreset(i){
      const p=presets[i];
      document.getElementById('tl').value=p.tl;document.getElementById('tr').value=p.tr;
      document.getElementById('bl').value=p.bl;document.getElementById('br').value=p.br;
      document.getElementById('linkCorners').checked=false;
      updatePreview();
    }

    function update(el){
      if(document.getElementById('linkCorners').checked){
        ['tl','tr','bl','br'].forEach(id=>document.getElementById(id).value=el.value);
      }
      updatePreview();
    }
    function sync(){if(document.getElementById('linkCorners').checked){const v=document.getElementById('tl').value;['tr','bl','br'].forEach(id=>document.getElementById(id).value=v);updatePreview();}}

    function updatePreview(){
      const unit=document.getElementById('unit').value;
      const v={tl:document.getElementById('tl').value,tr:document.getElementById('tr').value,bl:document.getElementById('bl').value,br:document.getElementById('br').value};
      ['tl','tr','bl','br'].forEach(id=>document.getElementById(id+'Val').textContent=v[id]);
      const radius=`${v.tl}${unit} ${v.tr}${unit} ${v.br}${unit} ${v.bl}${unit}`;
      const box=document.getElementById('previewBox');
      box.style.borderRadius=radius;
      box.style.background=document.getElementById('previewBg').value;
      const size=document.getElementById('previewSize').value+'px';
      box.style.width=size;box.style.height=size;
      const allSame=v.tl===v.tr&&v.tr===v.bl&&v.bl===v.br;
      document.getElementById('cssOutput').textContent=allSame?
        `border-radius: ${v.tl}${unit};`:
        `border-radius: ${v.tl}${unit} ${v.tr}${unit} ${v.br}${unit} ${v.bl}${unit};`;
    }

    function copyCSS(){navigator.clipboard.writeText(document.getElementById('cssOutput').textContent).then(()=>{const b=document.querySelector('.copy-btn');b.textContent='Copied!';b.classList.add('copied');setTimeout(()=>{b.textContent='Copy';b.classList.remove('copied')},2000)});}
    updatePreview();
  </script>
<script src="ads.js"></script>
</body>
</html>