Skip to main content
SlapMyWeb
Skip to tool
Free tool

CSS border radius generator

Visually design border-radius for any element. Adjust corners individually or together, pick presets, and copy production-ready CSS instantly.

  • 100% free
  • No sign-up
  • No limits
  • Instant results
12px
12px
12px
12px
css
border-radius: 12px;
What this tool does
  • Visual live preview
  • Link / unlink corners
  • 6 ready presets
  • px and % units
  • 100% browser — no upload
Want the whole picture? Run 240+ checks on your site — free, 30 seconds, no signup.Run a free audit
The short version

What is CSS Border Radius Generator?

A CSS border radius generator is a visual tool that helps you create rounded corners for any HTML element.

The CSS border-radius property rounds the corners of an element's outer border edge. You can set a single radius for all four corners or specify each corner individually for asymmetric shapes. This tool gives you independent control over top-left, top-right, bottom-right, and bottom-left corners with a live preview. You can also link all corners to adjust them simultaneously. The generated CSS works in all modern browsers without vendor prefixes.

Step by step

How to use CSS Border Radius Generator

  1. 1

    Adjust corner values

    Use the sliders or type values directly for each corner — top-left, top-right, bottom-right, and bottom-left. Toggle the link icon to adjust all corners at once.

  2. 2

    Preview your shape

    The live preview box updates instantly as you change values. Watch how different corner combinations create pills, leaves, blobs, and other organic shapes.

  3. 3

    Copy the CSS

    Click "Copy CSS" to copy the border-radius property to your clipboard. Paste it into your stylesheet and you're done.

What's inside

Everything this tool
does for you

  • Individual control for all four corners with range sliders
  • Link mode to adjust all corners simultaneously
  • Live preview that updates in real-time
  • Shorthand CSS output (e.g., border-radius: 10px 20px 30px 40px)
  • Copy to clipboard with one click
  • Works in all modern browsers without prefixes
  • Preset shapes for common patterns
  • 100% client-side — no server calls needed
Questions

Frequently asked questions

This tool fixed one thing.
Now fix the whole site.

Our scanner runs 240+ checks across 10 audit areas, ranks every issue by the score points it costs, and hands you the code to paste.

Run a free audit
240+ checksResults in 30sNo signup