CSS border-radius generator with visual editor
Simple mode — sets the same radius for the horizontal and vertical axes of each corner.
Advanced mode — allows setting separate horizontal (H) and vertical (V) radius for each corner. Syntax: tl-h tr-h br-h bl-h / tl-v tr-v br-v bl-v.
Link all — when changing any corner, all others automatically adopt the same value.
CSS Border-Radius Generator — Corner Rounding Online
Visual CSS border-radius editor for creating any shapes: from simple rounded corners to complex organic forms (drop, leaf, egg). Includes 7 ready presets and random generation.
Border-Radius Syntax
Shorthand: border-radius: 10px; — all four corners equal.
Four values: border-radius: TL TR BR BL; — clockwise from top-left.
Elliptic Rounding (Slash Syntax)
Slash syntax sets different horizontal and vertical radii: border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; — creates organic shapes like eggs, drops, and leaves.
Ready Shapes
| Shape | CSS |
|---|---|
| Circle | border-radius: 50% |
| Pill | border-radius: 999px |
| Drop | border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% |
| Egg | border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% |
Frequently Asked Questions
How to make a perfect circle?border-radius: 50%; on an element with equal width and height.
Can border-radius be animated?
Yes. CSS transitions work: transition: border-radius 0.3s ease; creates smooth morphing between shapes.
For shadows use CSS Shadow, for gradients — CSS Gradient.
Useful articles
WCAG Color Contrast: Website Accessibility Guide
A complete guide to color contrast: WCAG 2.1 standards, AA and AAA levels, calculation formula, practical examples of good and bad contrast, and how to fix accessibility issues.
Markdown: Syntax and Features
A complete guide to Markdown: text formatting, headings, lists, links, images, tables, and code.