Skip to content
Book a demoStart free

Border Radius Generator

Generate CSS border-radius with per-corner control and live preview. Create circles, pills, and complex shapes.

Border Radius GeneratorGratisCSS & DevRuns in your browser
border-radius: 8px;

Works in your browser. What you paste or upload is processed on your device.

Key features of the border radius generator

  • Independent radius control for all four corners
  • Uniform and custom corner mode
  • Live shape preview
  • Generates short and long-form border-radius syntax
  • Copy CSS border-radius value

How to use the border radius generator

  1. Choose uniform or custom

    Toggle between setting all corners equally or independently.

  2. Adjust corner values

    Use sliders or input fields to set the radius for each corner.

  3. Preview the shape

    See the live preview of how the element will look with your radius values.

  4. Copy the CSS

    Click 'Copy CSS' to get the border-radius declaration for your stylesheet.

  5. Apply to your element

    Paste the CSS into your stylesheet and adjust other properties as needed.

What is a border radius generator?

The Border Radius Generator creates CSS border-radius declarations visually. Independently control each corner's radius (top-left, top-right, bottom-right, bottom-left) or set all corners at once to create rounded corners, pill shapes, circles, teardrops, and other complex shapes.

Border-radius is one of CSS's most-used properties, transforming sharp-edged rectangles into friendly, modern rounded shapes. From subtle card corners (4px) to full circles (50%), this generator gives you visual control over every corner.

Why use a border radius generator?

Creating complex asymmetric border-radius values (like squircles or organic blob shapes) by hand requires calculating exact percentages for all four corners. This visual tool lets you drag and see the shape update live, reaching the perfect shape in seconds instead of minutes.

Border radius generator: frequently asked questions

Something else? Ask the team

How do I make a perfect circle with border-radius?

Set border-radius: 50% on a square element (equal width and height). The 50% applies to all corners, creating a perfect circle.

What is the difference between px and % for border-radius?

Pixel values set an absolute corner radius regardless of element size. Percentage values are relative to the element's dimensions — 50% on a square creates a circle; 50% on a rectangle creates an ellipse.

How do I create a pill shape?

Set border-radius to a value larger than half the element's height (e.g., border-radius: 100px on a 40px tall button). This creates fully rounded left and right ends — the classic pill/capsule shape.

What is the shorthand vs longhand border-radius syntax?

Shorthand: border-radius: 10px 20px 30px 40px (top-left, top-right, bottom-right, bottom-left). Longhand: border-top-left-radius: 10px, border-top-right-radius: 20px, etc.

What browser support does border-radius have?

Border-radius is supported in all modern browsers and IE9+. No vendor prefixes are needed for standard usage. It's one of the most universally supported CSS properties.

Each one opens on its own page and works straight away, with no sign-up.

Ontdek meer gratis tools:Schema GeneratorMetatag GeneratorLLMs.txt GeneratorBrowse all free tools

Meer AI-vermeldingen winnen?

Border Radius Generator is one piece of the puzzle. See how ChatGPT, Gemini, Perplexity, and Google AI Overviews actually view your brand, and get a prioritised list of fixes, with a free AEO & GEO audit from AI Rank Lab.

One check is a start. The audit checks the whole site.

Voer een gratis AEO- en GEO-audit uit or Bekijk prijzen.

  • Scores SEO, answer-engine (AEO) and generative-engine (GEO) readiness
  • Lists the fixes, page by page
  • Then track whether ChatGPT, Gemini, Perplexity and Google AI Overviews cite you
fieldnote.app4,571 credits

Site audit

fieldnote.app · SEO, AEO and GEO

Illustrative data
SEO
82
+6
AEO
64
+11
GEO
58
+9
Pages
48
Fixesby impact
  • /pricing · Missing H1High
  • /blog/guide · No FAQ schemaMedium
  • /llms.txt · Not foundMedium
  • /about · Meta description too longLow

See where your whole site stands

Paste your site. The free audit scores it for SEO, answer engines and generative engines, with the fixes.

Start freeBook a demo