CSS Border Radius Generator
Design CSS border-radius values visually with per-corner control, live preview, and generated CSS code.
About This Tool
The CSS Border Radius Generator is a visual editor that lets you craft border-radius values for any HTML element without writing CSS by hand. Instead of guessing pixel values and refreshing a page to see the result, you can adjust each corner independently using sliders and number inputs while watching the shape update in real time.
The tool supports three CSS units: px, %, and rem. Pixel values are the most common choice for fixed-size elements, percentages are ideal for responsive circles and ellipses, and rem values keep your border radii consistent with a root-font-size-based design system.
A link/unlink toggle controls whether all four corners move together or independently. When linked, dragging any slider updates all corners simultaneously, which is perfect for uniform rounded rectangles. When unlinked, each corner can be tuned individually to create asymmetric shapes such as organic blobs, leaf motifs, or speech bubbles.
Eight built-in presets provide common starting points: Square, Rounded, Pill, Circle, Blob, Leaf, Drop, and an Asymmetric shape. Click any preset thumbnail to load its values instantly, then fine-tune from there. The generated CSS output uses the most compact shorthand possible — a single value when all corners match, two values for symmetrical pairs, or the full four-value notation when each corner differs.
All processing happens entirely in your browser. No data is transmitted to any server. Simply copy the generated CSS and paste it into your stylesheet.
How to Use
- Choose a unit (px, %, or rem) from the dropdown selector.
- Toggle the Link button to decide whether all four corners should move together or independently.
- Drag the sliders or type values into the number inputs to set the radius for each corner — Top Left, Top Right, Bottom Right, and Bottom Left.
- Watch the live preview update instantly as you adjust values. Optionally change the preview box width and height.
- Or click a preset thumbnail to load a common shape as a starting point.
- Copy the generated CSS by clicking the Copy button or pressing Ctrl+Shift+C.
- Paste the CSS into your stylesheet and apply it to any element.
FAQ
What is the CSS border-radius property?
The border-radius CSS property rounds the corners of an element. It accepts one to four values that correspond to the top-left, top-right, bottom-right, and bottom-left corners. When a single value is given, all corners share the same radius. You can use pixels, percentages, or any other CSS length unit.
How do I make a perfect circle with border-radius?
Set border-radius: 50% on an element that has equal width and height. The 50% value tells the browser to curve each corner by half the element's dimension, resulting in a perfect circle. If the width and height differ, you will get an ellipse instead.
What is the difference between px, %, and rem for border-radius?
px sets a fixed radius regardless of element size — good for consistent UI components. % is relative to the element's dimensions, making it ideal for circles and responsive shapes. rem is relative to the root font size, which helps maintain consistent radii across a design system that scales with typography.
Can I use different radii for each corner?
Yes. Click the Unlink button in this tool to control each corner independently. In CSS, provide four space-separated values: border-radius: top-left top-right bottom-right bottom-left. This lets you create asymmetric shapes such as speech bubbles, organic blobs, or tab-like elements.
Is my data safe with this tool?
Absolutely. This tool runs entirely in your browser using client-side JavaScript. No values are sent to any server, and nothing is stored. You can use it offline once the page has loaded.
Related Tools
Box Shadow Generator
Design CSS box shadows visually with sliders for offset, blur, spread, and color. Multi-layer support.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients visually with color stops, angle control, and live preview.
CSS Layout Generator
Visually build Flexbox and CSS Grid layouts with live preview and generated CSS code.
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
Flexbox Playground
Experiment with all CSS Flexbox properties visually. Configure container and item settings with live preview and generated CSS code.