CSS Border Radius Generator

Craft custom rounded corners visually. Control each corner, mix px and %, create blobs and ellipses — copy the CSS in one click.

Presets

Options

Corners

Top Left 20px
Top Right 20px
Bottom Right 20px
Bottom Left 20px

Preview

Width 260px
Height 180px

CSS Output

border-radius: 20px;

Full rule:

.element {
  border-radius: 20px;
}

About the CSS Border Radius Generator

The CSS Border Radius Generator lets you design custom rounded corners visually and copy the resulting border-radius CSS rule with a single click. Control each of the four corners independently, switch between pixel and percentage units, and enable elliptical mode to give every corner a separate horizontal and vertical radius.

Beyond simple rounded rectangles, this tool supports advanced shapes like pills, circles, blobs, and organic leaf shapes by combining per-corner elliptical radii. Nine built-in presets — Rounded, Pill, Circle, Leaf, Blob, Ticket, Squircle, Arch, and Reset — give you a fast starting point, and the live preview updates as you drag any slider.

How to Use the CSS Border Radius Generator

  1. Click a Preset to load a ready-made shape such as Pill, Circle, or Blob.
  2. Pick a unit: px for fixed pixel radii or % for radii that scale with the element's size.
  3. Toggle Link all corners off to adjust each corner independently and create asymmetric shapes.
  4. Enable Elliptical to split each corner into horizontal and vertical radii — essential for blob and leaf shapes.
  5. Drag the Top Left, Top Right, Bottom Right, and Bottom Left sliders to shape your element.
  6. Adjust the preview box Width, Height, and Shape colour to match the element you are designing.
  7. Click Copy to grab the finished border-radius CSS rule ready to paste into your stylesheet.

Common Use Cases for CSS Border Radius

  • Rounded cards and panels — Apply a small, uniform radius like 12px to soften cards and containers without distorting them.
  • Pill-shaped buttons and badges — Use a very large radius (e.g. 999px) to create fully rounded pill buttons, tags, and notification badges.
  • Circular avatars — Set border-radius: 50% on a square image or element to turn it into a perfect circle.
  • Organic blob shapes — Use elliptical radii with different horizontal and vertical values on each corner to produce modern organic blobs for hero illustrations.
  • Directional speech bubbles — Round three corners and keep one sharp to indicate the source of a chat message or tooltip.
  • Input fields and search boxes — Match the border-radius of inputs to your buttons for a cohesive form UI.
  • Arch and tab shapes — Round only the top two corners to build tab headers, arches, or the top of a card.

Frequently Asked Questions

What is the CSS border-radius property?

The border-radius property rounds the corners of an element. It accepts one to four values — one value rounds all corners equally, while four values target top-left, top-right, bottom-right, and bottom-left in order.

When should I use px versus % for border-radius?

Use px when you want a fixed, consistent corner radius regardless of element size — common for cards and inputs. Use % when the radius should scale with the element, such as 50% for a perfect circle or pill shape.

What is an elliptical border radius?

An elliptical radius gives each corner a separate horizontal and vertical radius, written as horizontal / vertical. This unlocks blob shapes, leaf shapes, and asymmetric curves that are impossible with circular radii alone.

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

Set the element's width and height to the same value, then apply border-radius: 50%. This works on any square element, including images, divs, and buttons.

What does border-radius: 999px do?

A very large pixel value like 999px guarantees fully rounded ends regardless of element height, producing a pill shape. The browser clamps the radius to half the shorter side, so any value larger than that produces the same result.

Can I round only specific corners?

Yes. Use either the shorthand with four values (setting unwanted corners to 0) or the long-hand properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

Does border-radius clip child content?

By default, backgrounds respect the rounded corners but absolutely positioned or overflowing child elements may escape them. Add overflow: hidden on the parent to force children to be clipped by the rounded shape.

Is border-radius supported in all browsers?

Yes. border-radius is fully supported across all modern browsers including Chrome, Firefox, Safari, and Edge. Vendor prefixes are no longer required for current browser targets.