Skip to main content
SlapMyWeb
Get started
Skip to tool
CSS & Design tools/All tools
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.

12px
12px
12px
12px
css
border-radius: 12px;

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.

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.

Features

  • 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

Related Tools

CSS Gradient Generator

Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.

Open tool

CSS Box Shadow Generator

Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.

Open tool

CSS Flexbox Generator

Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.

Open tool

CSS Grid Generator

Visual CSS grid builder with rows, columns, gap and named areas. Copy CSS and HTML code.

Open tool

CSS Text Shadow Generator

Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.

Open tool

CSS Animation Generator

Build CSS keyframe animations with visual timeline. Presets for fade, slide, bounce and spin.

Open tool
See all CSS & Design tools

Frequently Asked Questions

What is CSS border-radius?+
CSS border-radius is a property that rounds the corners of an element's outer border edge. It accepts length or percentage values. A single value rounds all four corners equally, while up to four values can be specified for each corner individually in the order: top-left, top-right, bottom-right, bottom-left.
How do I make a perfect circle with border-radius?+
Set border-radius to 50% on a square element (equal width and height). This rounds each corner by half the element's size, creating a perfect circle. For non-square elements, 50% creates an ellipse instead.
Can I use different units for border-radius?+
Yes, border-radius accepts pixels (px), percentages (%), em, rem, and other CSS length units. Pixels give fixed rounding regardless of element size. Percentages scale relative to the element's dimensions, making them responsive.
What is the difference between border-radius shorthand values?+
One value (10px) applies to all corners. Two values (10px 20px) set top-left/bottom-right and top-right/bottom-left. Three values (10px 20px 30px) set top-left, top-right/bottom-left, and bottom-right. Four values set each corner individually clockwise from top-left.
Is border-radius supported in all browsers?+
Yes, border-radius has been supported in all major browsers since IE9 (2011). No vendor prefixes are needed for modern browsers. It works in Chrome, Firefox, Safari, Edge, and mobile browsers.
Can I animate border-radius?+
Yes, border-radius is animatable with CSS transitions and animations. You can smoothly morph between different corner values using transition: border-radius 0.3s ease or CSS keyframe animations for creative shape-shifting effects.