⬜ Dev

CSS Border Radius Generator

Create custom rounded shapes with 8 independent controls (4 corners × 2 axes). Live preview and ready-to-copy CSS. Everything in your browser.

Width: Height: Unit:

Corners (radii)

Top left

Horizontal Vertical

Top right

Horizontal Vertical

Bottom right

Horizontal Vertical

Bottom left

Horizontal Vertical

Sync all corners

CSS

How it works

The border-radius property accepts up to 8 values — four horizontal radii and four vertical ones — separated by a /. This tool writes out the full syntax, so you can build organic shapes that go well beyond plain rounded corners: blobs, teardrops and lens shapes.

Pick % when the radius should scale with the size of the element (the safest choice for responsive layouts), px for a fixed radius, or em/rem to scale with the font size. Everything runs in the browser.

Well past the default rounded corner

Rounding all four corners with a single value is the easy part. The trouble starts when you want an organic blob, a teardrop or an asymmetric card: that calls for the full border-radius syntax, up to eight values, which almost nobody keeps in their head. On this page each corner gets two controls, horizontal and vertical radius, the preview reacts instantly and the CSS is ready to copy, with square, pill, circle and blob presets to start from.

The extended syntax uses a slash: the four values before it are the horizontal radii and the four after it the vertical ones, always in the order top-left, top-right, bottom-right, bottom-left. Percentages hide a classic gotcha: the horizontal radius is relative to the width and the vertical one to the height. That is why 50% everywhere turns a rectangle into an ellipse, not a circle. The tool only emits the slash when the two sides differ, keeping the output short.

Prefer percentages when the shape should scale with the element, and px when the radius must stay fixed, like the corners of a button. Test with your component's real width and height, because the same set of radii looks completely different at another aspect ratio. If large values stop having any effect, that is the browser scaling down radii whose sum exceeds the element's side. The copied code includes the preview's width and height; delete those lines if you do not need them.

Frequently asked questions

What are the two sliders per corner for?

One sets the horizontal radius, the other the vertical one. Equal values give a circular arc; different values give an elliptical arc, and that asymmetry is what produces blobs, drops and lens shapes.

I set 50% everywhere and got an ellipse, not a circle. Why?

In percentages, the horizontal radius follows the width and the vertical one the height. On a rectangle those differ, so you get an ellipse; a true circle only happens when width equals height.

Can I use em or rem for the radius?

Yes; the unit selector applies px, %, em or rem to all eight values at once. Em and rem make the radius scale with typography, which keeps proportions intact when the user bumps up the font size.

Related Tools

✂️

CSS Clip-Path Generator

Create CSS shapes with clip-path: polygons, circles, ellipses and insets. Pick presets (star, hexagon, arrow, chevron) and copy the ready code. Everything in your browser.

▲

CSS Triangle Generator

Create pure CSS triangles using the border trick. Choose direction (up, down, left, right), size and color. Useful for tooltips, arrows and pointers. Everything in your browser.

🎨

Mesh Gradient Generator

Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.

📦

CSS Minifier

Minify CSS by removing comments, extra whitespace and line breaks. Reduces file size without changing behavior.

🌈

CSS Gradient Generator

Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.

〰️

Cubic Bezier Generator

Create and visualize cubic-bezier curves for CSS animations. Drag control points, preview the animation and copy the value. Includes presets (ease, ease-in, ease-out). Everything in your browser.