Xevon Tools logo
Color & Design
Live

Border Radius Generator

Generate CSS border-radius with visual controls.

Generate CSS border-radius with visual controls.

Quick start: Drag the corner handles on the preview shape to set the radius for each of the four corners independently. → Toggle between linked mode (all corners move together) and independent mode for asymmetric shapes. → Switch between pixel values and percentage values depending on whether you need fixed or relative rounding.

How to use Border Radius Generator

  1. 1

    Drag the corner handles on the preview shape to set the radius for each of the four corners independently.

  2. 2

    Toggle between linked mode (all corners move together) and independent mode for asymmetric shapes.

  3. 3

    Switch between pixel values and percentage values depending on whether you need fixed or relative rounding.

  4. 4

    Preview the resulting shape in real time on the sample element as you drag.

  5. 5

    Click 'Copy CSS' to grab the full border-radius shorthand property for your stylesheet.

Popular tools

Try our most-used tools

Merge PDFRemove BackgroundJSON Formatter

Why use Border Radius Generator?

  • Independent control over all four corners lets you create asymmetric organic shapes.
  • Supports both pixel and percentage units so you can choose fixed or responsive rounding.
  • Linked mode keeps all corners in sync for quick uniform radius adjustments.
  • Live preview on a sample element shows the exact shape before you copy.
  • Generates the standard CSS shorthand — no vendor prefixes needed for modern browsers.

Common use cases

  • Design pill-shaped buttons by setting large horizontal radii on left and right corners.
  • Create organic blob shapes for decorative background elements on a landing page.
  • Build speech-bubble shapes by rounding three corners and leaving one sharp.
  • Prototype card designs with subtle corner rounding that matches your design system's spacing tokens.
  • Experiment with 50% radius to turn square containers into perfect circles or ellipses.

About Border Radius Generator

Border radius controls the corner rounding of every box on the web, from buttons and cards to avatars and decorative blobs. Xevon Tools' Border Radius Generator gives you a visual drag interface for all four corners with independent or linked control, pixel or percentage units, and an optional elliptical (slash) mode for organic shapes. The live preview updates as you drag, so you can experiment with asymmetric configurations without writing a single line of CSS first. Once you have the shape you want, one click copies the complete border-radius shorthand to your clipboard. The tool is especially helpful for design system work where you need to define a consistent set of radius tokens — prototype each visually, then export the values. It also makes it easy to explore creative shapes like speech bubbles, pill buttons, and blob backgrounds that would be tedious to code by hand. Everything runs in your browser with no external dependencies, so it works offline and requires no account.

Frequently asked questions

Yes. You can toggle between pixel and percentage units. Percentage-based radii are useful when you want the rounding to scale proportionally with the element's size, such as turning a responsive container into a circle with 50%.
Absolutely. Switch to independent mode and each corner gets its own slider or drag handle. The CSS output uses the four-value shorthand like border-radius: 10px 20px 30px 0px to capture the asymmetry.
CSS border-radius supports a slash to set different horizontal and vertical radii (e.g., border-radius: 10px / 20px). This generator includes that option for creating elliptical corners, which is useful for organic and blob-like shapes.
Yes. The border-radius property has been supported in all major browsers for years, including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed.

Your files never leave your device

Every tool on Xevon Tools runs 100% in your browser. No uploads, no servers, no tracking. Free forever.

Learn more

Embed Border Radius Generator on your site

Add this tool to your own website, blog, or internal tool page with one line of code. Free to use, no attribution required (but appreciated).

<iframe src="https://www.xevontools.com/embed/border-radius-generator" width="100%" height="640" style="border:1px solid #e2e8f0;border-radius:12px;" title="Border Radius Generator — Xevon Tools"></iframe>
Share: