Border Radius Generator
Color
Visual border-radius editor: uniform mode for quick rounding, per-corner mode for chat bubbles and tabs, elliptical mode for blob shapes (horizontal radius differs from vertical). Presets cover the common shapes you'd build by hand. Units in `px`, `%`, or `rem`. Output is the shortest valid CSS — single value when all corners match, four values when they don't, full `h / v` syntax when elliptical.
Presets
border-radius: 16px;How to use
- Pick a preset to start, or toggle 'Uniform' off to edit per-corner.
- Toggle 'Elliptical' for blob shapes (each corner gets two radii).
- Copy `border-radius: …` and paste into your CSS.
Frequently asked questions
- When is elliptical actually useful?
- Mostly for organic 'blob' shapes used in illustrations, where each corner is asymmetric. Standard UI almost always uses uniform or 4-value radii.
- px vs % radius?
- % is relative to the element's width/height — so a 50% radius on a square gives a circle, on a rectangle an oval. px is absolute regardless of element size.
- Why doesn't the pill preset look right on a square?
- Pill = 999px radius assumes the element is wider than tall. On a square element, that just becomes a circle.
- Browser support?
- All four-value `border-radius` and elliptical syntax work in every browser since 2010. Universally safe.
Related tools
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.