⭕ CSS Border Radius Generator — Rounded Corners Visual Tool

Generate CSS border-radius visually. Control each corner individually with live preview. Free for web developers.

Max: 200px

How to Use This Tool

  1. Adjust sliders for each corner — Toggle between px and % units — Lock/unlock uniform corners — Copy the generated CSS and apply to your element

Frequently Asked Questions

How do I make a circle?

Set border-radius to 50% on a square element. This tool shows the CSS and a live preview so you can see the effect immediately.

What's the difference between px and %?

px gives fixed rounding regardless of element size. % scales with the element — 50% on a square makes a circle, on a rectangle makes an ellipse.

Can I round only one corner?

Yes! Each corner has independent controls. Unlock the uniform mode and adjust corners individually. The generated CSS uses the shorthand syntax with all four values.

Related Tools

(function() { var locked = true; var unit = 'px'; var maxVal = 200; function updateAllFrom(val, sourceId) { ['bdrTL', 'bdrTR', 'bdrBL', 'bdrBR'].forEach(function(id) { if (id !== sourceId) document.getElementById(id).value = val; }); update(); } function update() { var tl = parseInt(document.getElementById('bdrTL').value); var tr = parseInt(document.getElementById('bdrTR').value); var bl = parseInt(document.getElementById('bdrBL').value); var br = parseInt(document.getElementById('bdrBR').value); var label = unit === 'px' ? unit : unit; document.getElementById('bdrTLVal').textContent = tl + label; document.getElementById('bdrTRVal').textContent = tr + label; document.getElementById('bdrBLVal').textContent = bl + label; document.getElementById('bdrBRVal').textContent = br + label; var cssValue = tl + unit + ' ' + tr + unit + ' ' + br + unit + ' ' + bl + unit; document.getElementById('bdrPreviewBox').style.borderRadius = cssValue; document.getElementById('bdrOutput').textContent = 'border-radius: ' + cssValue + ';'; } // Lock button document.getElementById('bdrLockBtn').addEventListener('click', function() { locked = !locked; this.textContent = locked ? '🔒 Uniform' : '🔓 Individual'; this.classList.toggle('locked', locked); if (locked) { var val = document.getElementById('bdrTL').value; updateAllFrom(val, 'bdrTL'); } }); // Unit toggle document.getElementById('bdrUnitToggle').addEventListener('click', function(e) { if (e.target.tagName !== 'BUTTON') return; var btns = this.querySelectorAll('button'); btns.forEach(function(b) { b.classList.remove('active'); }); e.target.classList.add('active'); unit = e.target.dataset.unit; maxVal = unit === 'px' ? 200 : 100; document.getElementById('bdrMaxLabel').textContent = maxVal + (unit === 'px' ? 'px' : '%'); ['bdrTL', 'bdrTR', 'bdrBL', 'bdrBR'].forEach(function(id) { var el = document.getElementById(id); el.max = maxVal; if (parseInt(el.value) > maxVal) el.value = maxVal; }); update(); }); // Slider inputs ['bdrTL', 'bdrTR', 'bdrBL', 'bdrBR'].forEach(function(id) { document.getElementById(id).addEventListener('input', function() { if (locked) updateAllFrom(this.value, this.id); else update(); }); }); // Copy document.getElementById('bdrCopyBtn').addEventListener('click', function() { navigator.clipboard.writeText(document.getElementById('bdrOutput').textContent).then(function() { var btn = document.getElementById('bdrCopyBtn'); btn.textContent = '✅ Copied!'; setTimeout(function() { btn.textContent = '📋 Copy CSS'; }, 1500); }); }); document.getElementById('bdrOutput').addEventListener('click', function() { navigator.clipboard.writeText(this.textContent).then(function() { var out = document.getElementById('bdrOutput'); out.style.background = 'rgba(6, 182, 212, 0.15)'; setTimeout(function() { out.style.background = ''; }, 400); }); }); update(); })();

Powered by ToolStand