CSS Border Radius Generator Online
Build simple, per-corner, and blob border-radius CSS with a live preview. Everything renders in your browser.
The CSS Border Radius Generator runs entirely in your browser. The values you enter and the CSS you generate never leave your device and nothing is uploaded to ArrayKit.
Open the Box Shadow Generator
About CSS Border Radius Generator
The CSS Border Radius Generator builds a border-radius declaration you can paste straight into your stylesheet, with a live preview box that updates as you adjust it. Switch between Simple mode for one radius on all four corners, Per-corner mode to round each corner independently, and Blob mode for the eight-value elliptical form designers use to fake an organic, hand-drawn shape. Pick px, %, or rem, drag the values around, or hit Randomize in Blob mode to explore shapes you would not have typed by hand. It is useful for buttons, cards, avatars, hero blobs, and any component where rounded corners need to look exactly right before you commit the CSS. Built for front-end developers and designers who want instant visual feedback. Everything renders locally in your browser — no styles or markup are uploaded.
Features
- Simple mode rounds all four corners with a single value and a slider
- Per-corner mode sets top-left, top-right, bottom-right, and bottom-left independently
- Blob mode generates the 8-value elliptical border-radius for organic shapes
- One-click Randomize button in Blob mode for quick shape exploration
- Switch between px, %, and rem units for simple and per-corner radii
- Live square preview updates instantly as you change any value
- Copy-ready CSS declaration with a single click
- Runs entirely in your browser with no CSS ever uploaded
How to use the CSS Border Radius Generator
- Choose Simple, Per-corner, or Blob mode
- Adjust the slider, number fields, or blob percentages
- Watch the live preview box update in real time
- Copy the generated border-radius CSS declaration
Example
Input
all corners 12px
Output
border-radius: 12px;
Four equal corners collapse to a single border-radius value.
Common errors & troubleshooting
- The blob shape looks like a rounded rectangle instead of an organic blob. — Make sure the horizontal and vertical percentages differ per corner — equal H and V values on every corner just produce a simple rounded shape.
- Per-corner CSS collapses back to a single value unexpectedly. — This is expected: when all four corners match, the CSS Border Radius Generator emits the shorter single-value shorthand instead of repeating the same number four times.
- A percent radius looks different on a non-square element. — Percentage border-radius is relative to the element's own width and height, so the same percent value renders differently on a wide rectangle than on a square — test against your actual element's aspect ratio.
- The rounded corner disappears on a very small element. — Border-radius is capped by half the element's shortest side, so a large px radius on a small box simply renders as a full pill or circle instead of overflowing.
Frequently asked questions
- What does the CSS Border Radius Generator's Blob mode actually produce?
- It produces the 8-value elliptical border-radius syntax — four horizontal percentages, a slash, then four vertical percentages, one pair per corner — which is the standard trick for organic, hand-drawn-looking shapes in CSS.
- Can the CSS Border Radius Generator output percent or rem instead of pixels?
- Yes. Simple and Per-corner modes let you switch the unit between px, %, and rem, and the live preview and generated CSS update immediately to match.
- Why does Per-corner mode sometimes output a single value instead of four?
- When all four corners end up equal, the tool automatically collapses the border-radius to the shorter single-value form — that is valid, equivalent CSS and keeps your stylesheet cleaner.
- Does the CSS Border Radius Generator upload my design or CSS anywhere?
- No. Every calculation and the live preview run locally in your browser. The values you enter and the CSS you generate never leave your device.
- What is the Randomize button for in Blob mode?
- It fills all eight blob percentages with new random values in one click, so you can quickly browse organic shape variations instead of typing each corner by hand.
- Is the generated border-radius CSS supported in all modern browsers?
- Yes. Both the standard shorthand and the 8-value elliptical blob syntax are part of the CSS Backgrounds and Borders spec and work in every current major browser.
Related tools
- CSS Box Shadow Generator — Build layered CSS box-shadow values with a live preview and copyable code.
- CSS Gradient Generator — Design linear, radial and conic CSS gradients with live color stops and copy the code.
- CSS Clamp Calculator — Calculate a fluid CSS clamp() value from min and max sizes and viewport widths.
- CSS Grid Generator — Build CSS grid layouts visually and copy grid-template-columns, rows and gap.
- Cubic Bezier Generator — Design a cubic-bezier() easing curve with draggable handles and an animated preview.
- CSS Unit Converter — Convert between px, rem, em, pt and % live with a configurable root font size.
All ArrayKit tools