Color Picker
Pick colors with EyeDropper, get HEX/RGB/HSL/CMYK/HWB values, explore harmonies and gradients.
FREE ONLINE TOOL
CSS Border Radius Generator
Design CSS border-radius visually with draggable corner handles and per-corner sliders. Toggle between simple 4-value and advanced 8-value (horizontal/vertical per corner) modes. Apply presets like Circle, Pill, Blob, Organic, Drop, and Leaf shapes. Customize preview box background, border, and dimensions.
2 worked examples
Methodology and sources included
Ads only on eligible content
Reviewed April 27, 2026
Design
CSS Border Radius Generator is a free, browser-based design tool. Design CSS border-radius visually with draggable corner handles and per-corner sliders. Toggle between simple 4-value and advanced 8-value (horizontal/vertical per corner) modes. Apply presets like Circle, Pill, Blob, Organic, Drop, and Leaf shapes. Customize preview box background, border, and dimensions.
What this tool does
- draggable corner handles on live preview for intuitive adjustment
- individual sliders for each corner: top-left, top-right, bottom-right, bottom-left
- link all corners toggle for uniform radius
- advanced 8-value mode with separate horizontal and vertical radius per corner
- 10 shape presets: Rounded, Circle, Pill, Blob 1, Blob 2, Organic 1, Organic 2, Drop, Leaf, Square
More Design Tools
Glassmorphism Card GeneratorAdvanced glassmorphism card generator with live preview on colorful backgrounds. Color Shades & Tints GeneratorGenerate a full palette of shades and tints from any hex color — get lighter and Tailwind CSS Color PaletteBrowse all official Tailwind CSS colors with hex values — click any swatch to co Color Wheel & HarmoniesExplore color theory with an interactive wheel, harmony presets, palette intentIn-Depth Guide
The border-radius property looks simple in the CSS 2.1 grammar, just four length or percentage values, but CSS Backgrounds and Borders Level 3 extended it to eight values that define independent horizontal and vertical radii per corner, producing elliptical arcs instead of circular ones. The full longhand is border-top-left-radius: h v and the slash shorthand border-radius: 20px 10px 30px 5px / 10px 20px 30px 5px lets you paint organic blob shapes without reaching for SVG. FastTool's generator gives you eight draggable corner handles, a live shape preview, and the generated shorthand in both the compact four-value and full eight-value forms. It also exports the value as CSS custom properties and a Tailwind rounded-[...] arbitrary variant, so you can paste straight into the token file, a component class, or a Figma Dev Mode code block without manually translating between the syntaxes yourself.
Why This Matters
Buttons, cards, avatars, and tag pills all live or die by their corner geometry. A two-pixel difference in radius shifts a design from banking app 1998 to consumer app 2026. When you want something other than a uniform circle, a squircle, a blob, an asymmetric card, you need the eight-value elliptical syntax, and writing that by hand is error prone and tedious. Live visual tuning plus exact code output lets designers iterate on shape language without opening a bitmap editor, and keeps the final artefact as three lines of CSS instead of a heavyweight SVG mask or bitmap.
Real-World Case Studies
- Brand squircle system. A product designer wants the app avatars to use iOS-style squircles instead of true circles. She experiments with border-radius: 38% / 46% versus a full superellipse SVG mask and finds the elliptical shorthand gives 95 percent of the look for 5 percent of the complexity. The final token ships as --radius-avatar: 38% 38% 38% 38% / 46% 46% 46% 46% and renders identically on every platform without a single SVG asset in the bundle.
- Organic blob decoration. A marketing illustrator is building decorative background shapes. Rather than exporting twelve SVG blobs from a vector tool, she defines one div per shape and varies the eight radius values. Total payload is 340 bytes for all twelve decorations, each shape animates between states via CSS transitions, and the colours respond to dark mode for free, something static SVG would have required parallel exports for and doubled asset weight.
- Card component spec. A frontend engineer building a component library needs every card variant, basic, media, stat, testimonial, to share exactly one radius token. He drafts the shape in the generator at 12px horizontal / 8px vertical on two corners, exports the custom property, and drops it into tokens.css. A later redesign iteration changes only the token value, not the 34 cards that reference it, turning a two-hour audit into a two-line commit in minutes.
Technical Deep Dive
CSS Backgrounds 3 defines border-radius as four longhands of the form border-<vert>-<horz>-radius, each accepting two lengths for the horizontal and vertical radii of the corner's ellipse. The shorthand slash-separates the two axes: border-radius: 20px 40px / 10px 30px. Percentages resolve against the border box's width (horizontal) or height (vertical) per spec. When summed radii on the same side exceed the box dimension, the spec requires proportional shrinkage via factor f = min(1, dim / sum) applied to every radius; this prevents overlapping corners and unpredicted rendering artifacts across engines. Rendering uses elliptical arcs clipped by the border edge; antialiasing is handled by the GPU path rasteriser. Edge cases worth knowing: radius on collapsed-border tables is undefined in the spec; zero-width borders still trigger radius clipping of background and content; outline does not follow border-radius (use outline-offset with a matching radius hack). Transitions interpolate each radius component independently so animated shape-shifts stay smooth throughout.
💡 Expert Pro Tip
Avoid mixing px and percent on adjacent corners. If the container resizes (flex shrink, responsive layout), the percentage corner scales while the pixel corner does not, producing an off-balance shape that drifts as the viewport changes. Stick to one unit per element, or use clamp(6px, 1.2vw, 14px) on all four corners so the shape scales smoothly with the viewport without breaking proportion or introducing visual jank during resize.
Methodology, Sources & Accessibility
Methodology
The implementation produces standards-compliant CSS, SVG, or HTML that conforms to the current W3C specification for the relevant feature. Colour calculations happen in the sRGB colour space unless a specific alternative is surfaced in the UI (lab, OKLCH, HSL). Accessibility is considered in the default output (WCAG 2.2 contrast guidance, focus-state preservation, semantic HTML), but you remain responsible for the larger accessibility context your generated artifact lives in.
Authoritative Sources
- CSS Color Module Level 4 — The current W3C specification for colour values and conversions in CSS.
- WCAG 2.2 Contrast — Accessibility contrast requirements colour tools reference.
- SVG 2 Specification — The scalable vector graphics spec used for design artifact generation.
- W3C Web Standards — The World Wide Web Consortium publishes HTML, CSS, DOM, and accessibility specifications that browser-based tools rely on.
- MDN Web Docs — Mozilla's reference documentation for web platform APIs used throughout this tool's implementation.
About This Tool
CSS Border Radius Generator is a free, browser-based utility in the Design category. Design CSS border-radius visually with draggable corner handles and per-corner sliders. Toggle between simple 4-value and advanced 8-value (horizontal/vertical per corner) modes. Apply presets like Circle, Pill, Blob, Organic, Drop, and Leaf shapes. Customize preview box background, border, and dimensions. Standard processing runs on the client — no account is required, and there is no paywall or usage cap. The implementation uses audited standard-library primitives and published specifications rather than proprietary algorithms, so the output is reproducible and transparent.
Accessibility
FastTool targets WCAG 2.2 Level AA conformance: keyboard-navigable controls, visible focus states, semantic HTML, sufficient colour contrast, and screen-reader compatibility. If you encounter an accessibility issue, please reach us via the site footer.
Stop switching between apps — CSS Border Radius Generator lets you design CSS border-radius visually with draggable corner handles and per-corner sliders. Toggle between simple 4-value and advanced 8-value (horizontal/vertical per corner) modes. Apply presets like Circle, Pill, Blob, Organic, Drop, and Leaf shapes. Customize preview box background, border, and dimensions directly in your browser. The EU Accessibility Act became enforceable in June 2025, making WCAG 2.2 conformance a legal requirement for consumer-facing digital products sold into Europe — accessibility auditing is now a core design responsibility, not a QA afterthought. Standard input stays on your device — CSS Border Radius Generator uses client-side JavaScript for core processing, keeping the workflow private without requiring an account. From draggable corner handles on live preview for intuitive adjustment to individual sliders for each corner: top-left, top-right, bottom-right, bottom-left to link all corners toggle for uniform radius, CSS Border Radius Generator packs the features that matter for web design, graphic design, and creative projects. The tool is designed to handle both simple and complex inputs gracefully. Whether your task takes five seconds or five minutes, CSS Border Radius Generator provides a consistent, reliable experience every time. No tutorials needed — the interface walks you through each step so you can preview, copy, or export the result without confusion. Save this page and CSS Border Radius Generator is always ready when you need it — today, tomorrow, and for every future task.
You might also like our Glassmorphism Card Generator. Check out our Color Picker. For related tasks, try our Favicon Generator.
What Makes CSS Border Radius Generator Useful
- See changes in real time as you adjust settings
- Full individual sliders for each corner: top-left, top-right, bottom-right, bottom-left support so you can work without switching to another tool
- link all corners toggle for uniform radius — a purpose-built capability for design professionals
- Full advanced 8-value mode with separate horizontal and vertical radius per corner support so you can work without switching to another tool
- 10 shape presets: Rounded, Circle, Pill, Blob 1, Blob 2, Organic 1, Organic 2, Drop, Leaf, Square to handle your specific needs efficiently
- Customizable settings to tailor output to your exact requirements
- See changes in real time as you adjust settings
- One-click copy button to instantly transfer your result to the clipboard
- Completely free to use with no registration, no account, and no usage limits
- Runs in your browser for standard workflows, with no account or upload queue required
- Responsive design that works on desktops, tablets, and mobile phones
Why Choose CSS Border Radius Generator
- Uninterrupted workflow — the tool controls remain available without interstitials, forced waits, or layout shifts. Your workflow stays focused from input to result.
- Cross-platform consistency — whether you use Chrome, Firefox, Safari, or Edge on Windows, macOS, Linux, iOS, or Android, CSS Border Radius Generator delivers identical results. You never have to worry about platform-specific differences affecting your output.
- Offline capability — once the page loads, CSS Border Radius Generator works without an internet connection. This makes it useful in situations with limited connectivity — airplanes, remote locations, or metered mobile data plans — where cloud-based alternatives would fail.
- Continuous improvements — CSS Border Radius Generator is part of the FastTool collection, which receives regular updates and new features. Every time you visit, you get the latest version automatically without downloading updates or managing software versions.
How to Use CSS Border Radius Generator
- Visit the CSS Border Radius Generator tool page. It works on any device and requires no downloads or sign-ups.
- Choose your design settings in the designated input area. The draggable corner handles on live preview for intuitive adjustment option can help you format your input correctly. Labels and placeholders show you exactly what is expected.
- Adjust settings as needed. CSS Border Radius Generator offers individual sliders for each corner: top-left, top-right, bottom-right, bottom-left and link all corners toggle for uniform radius so you can tailor the output to your exact requirements.
- Press the action button and your result appears immediately. All computation happens in your browser, so there is zero latency.
- Check the output in the result panel. If something does not look right, you can adjust your input and reprocess instantly without any delays.
- Use the copy button to save your result to the clipboard, or preview, copy, or export the result. The copy feature works with a single click and includes the complete, formatted output.
- Continue using CSS Border Radius Generator for additional tasks — there is no limit on how many times you can run it in a single session or across multiple visits.
Insider Tips
- Export your results from CSS Border Radius Generator and save them in a design tokens file. This creates a single source of truth that your whole team can reference.
- Cross-reference your CSS Border Radius Generator output with accessibility guidelines. WCAG 2.1 AA requires specific contrast ratios, and getting this right early prevents costly rework.
- When working on responsive designs, test your values on both mobile and desktop by resizing the browser window while using this tool.
Pitfalls to Watch For
- Ignoring dark mode in your workflow. Modern users expect both light and dark themes — test every generated value in both contexts before declaring a design done.
- Forgetting that designs look different across devices. A color or spacing choice that works on a calibrated monitor can fail on an OLED phone or a cheap laptop panel — sample across real hardware.
- Skipping motion accessibility. `prefers-reduced-motion` affects an estimated 35% of users at some point — always provide a non-animated fallback for any animated design.
- Choosing colors by eye alone. Always check your generated palette against WCAG 2.2 contrast requirements (4.5:1 for body, 3:1 for large text) before shipping — accessibility regressions hurt both users and SEO.
- Hard-coding design tokens that should be CSS variables. Pasting raw hex values into dozens of components locks you out of easy theming later — centralize them in a token file from day one.
See CSS Border Radius Generator in Action
Creating rounded corners
Input
All corners: 12px
→
Output
border-radius: 12px;
A uniform border-radius gives smooth rounded corners. 12px is a popular choice for card components in modern UI design.
Creating a pill shape
Input
Border radius: 9999px
→
Output
border-radius: 9999px;
A very large radius on a shorter element creates a pill/capsule shape — commonly used for tags, badges, and buttons.
Comparison Overview
| Feature | Browser-Based (FastTool) | Desktop App (Figma/Photoshop) | Browser Extension |
|---|---|---|---|
| Cost | Free, no limits | $$$ license or subscription | Free with limitations |
| Privacy | Browser-local standard processing | Local processing | May upload data |
| Installation | None — runs in browser | Large download + install | Browser extension install |
| Speed | Instant for quick tasks | Powerful for complex work | Lightweight but limited |
| Cross-Platform | Works everywhere | OS-specific versions | Browser-dependent |
| Updates | Always latest version | Manual updates needed | Auto-updates |
When to Reach for a Different Approach
No tool is perfect for every scenario. Here are situations where a different approach will serve you better:
- When preparing for print production. Color calibration, bleed, crop marks, and spot colors are print-shop essentials that browser tools typically do not surface.
- When producing final assets for a major brand campaign. CSS Border Radius Generator handles quick iterations well, but the precision controls of Figma, Adobe Illustrator, or Affinity Designer remain essential for production-grade output.
- When you need real-time team collaboration. Browser tools are single-user by design; use Figma, Miro, or FigJam when multiple designers need to co-edit in real time.
Understanding CSS Border Radius
The CSS border-radius property accepts one to four values, controlling the rounding of each corner. A single value (border-radius: 10px) rounds all corners equally. Two values set top-left/bottom-right and top-right/bottom-left. Four values set each corner individually, clockwise from top-left. The value can be a length (px, em, rem) or a percentage — where 50% on a square element creates a perfect circle, and 50% on a rectangle creates an ellipse. Values exceeding half the element's dimension are automatically clamped to prevent overlap.
The advanced syntax using the / separator creates asymmetric (elliptical) corners: border-radius: 50px / 25px creates corners that are wider than they are tall, producing a more organic shape than circular rounding. Complex shapes like iOS app icons (which use a specific 'squircle' curve that is not a simple border-radius) can be approximated with border-radius: 22% but are more accurately achieved with SVG clip paths. For interactive design, animating border-radius creates fluid shape-morphing effects — transitioning from a circle (50%) to a rounded rectangle (10px) or vice versa is a common UI animation pattern.
How It Works
Built with CSS and JavaScript, CSS Border Radius Generator processes design parameters using mathematically precise algorithms with capabilities including draggable corner handles on live preview for intuitive adjustment, individual sliders for each corner: top-left, top-right, bottom-right, bottom-left, link all corners toggle for uniform radius. The tool uses the browser's built-in color parsing for accuracy and generates output compatible with all modern CSS specifications. Visual previews are rendered using the same engine that displays websites, so what you see matches what your users will see. All calculations happen instantly in your browser with no server roundtrip.
Worth Knowing
The font Helvetica was created in 1957 and is estimated to appear in roughly 20% of all signage worldwide.
Variable fonts are now mainstream on the web with over 95% browser support — a single file can replace dozens of static font weights while reducing total payload.
Concepts to Know
- HEX Color Code
- A six-digit hexadecimal representation of a color used in web design. Each pair of digits represents the Red, Green, and Blue components, with values from 00 to FF.
- Responsive Design
- A web design approach that makes pages render well on a variety of screen sizes. Responsive designs use flexible grids, flexible images, and CSS media queries to adapt to the viewing environment.
- Golden Ratio
- An irrational number approximately equal to 1.618, found throughout nature and used in art and design for aesthetically pleasing proportions.
- Typography Scale
- A set of harmoniously sized text values used in a design system. Common scales are based on mathematical ratios like the golden ratio (1.618) or the perfect fourth (1.333).
FAQ
How do I set different border-radius for each corner?
To set different border-radius for each corner, open CSS Border Radius Generator on FastTool and choose your design settings. The tool is designed to make this process simple: design css border-radius visually with draggable corner handles and per-corner sliders. toggle between simple 4-value and advanced 8-value (horizontal/vertical per corner) modes. apply presets like circle, pill, blob, organic, drop, and leaf shapes. customize preview box background, border, and dimensions.. Use the available options — including draggable corner handles on live preview for intuitive adjustment, individual sliders for each corner: top-left, top-right, bottom-right, bottom-left, link all corners toggle for uniform radius — to fine-tune the result. The standard workflow runs in your browser, with no FastTool account or project upload required.
What is the CSS border-radius 8-value syntax?
In the context of design, CSS border-radius 8-value syntax refers to a fundamental concept that professionals and learners encounter regularly. CSS Border Radius Generator provides a free, browser-based way to work with CSS border-radius 8-value syntax: design css border-radius visually with draggable corner handles and per-corner sliders. toggle between simple 4-value and advanced 8-value (horizontal/vertical per corner) modes. apply presets like circle, pill, blob, organic, drop, and leaf shapes. customize preview box background, border, and dimensions.. The tool offers draggable corner handles on live preview for intuitive adjustment, individual sliders for each corner: top-left, top-right, bottom-right, bottom-left, link all corners toggle for uniform radius and processes standard inputs locally in your browser.
Check out: Color Picker
How to create a pill shape with border-radius?
To create a pill shape with border-radius, open CSS Border Radius Generator on FastTool and choose your design settings. The tool is designed to make this process simple: design css border-radius visually with draggable corner handles and per-corner sliders. toggle between simple 4-value and advanced 8-value (horizontal/vertical per corner) modes. apply presets like circle, pill, blob, organic, drop, and leaf shapes. customize preview box background, border, and dimensions.. Use the available options — including draggable corner handles on live preview for intuitive adjustment, individual sliders for each corner: top-left, top-right, bottom-right, bottom-left, link all corners toggle for uniform radius — to fine-tune the result. The standard workflow runs in your browser, with no FastTool account or project upload required.
Can I use border-radius to make organic shapes?
As a browser-based design tool, CSS Border Radius Generator addresses this by letting you choose your design settings and get results instantly. Design CSS border-radius visually with draggable corner handles and per-corner sliders. Toggle between simple 4-value and advanced 8-value (horizontal/vertical per corner) modes. Apply presets like Circle, Pill, Blob, Organic, Drop, and Leaf shapes. Customize preview box background, border, and dimensions. It is free, private, and works on any device with a modern web browser. Tool input is handled locally where browser APIs support it, and FastTool does not require uploads for standard use.
You might also find useful: CSS Gradient Generator
What is the difference between horizontal and vertical radius?
In the context of design, difference between horizontal and vertical radius refers to a fundamental concept that professionals and learners encounter regularly. CSS Border Radius Generator provides a free, browser-based way to work with difference between horizontal and vertical radius: design css border-radius visually with draggable corner handles and per-corner sliders. toggle between simple 4-value and advanced 8-value (horizontal/vertical per corner) modes. apply presets like circle, pill, blob, organic, drop, and leaf shapes. customize preview box background, border, and dimensions.. The tool offers draggable corner handles on live preview for intuitive adjustment, individual sliders for each corner: top-left, top-right, bottom-right, bottom-left, link all corners toggle for uniform radius and processes standard inputs locally in your browser.
What is CSS Border Radius Generator and who is it for?
Built for designers and creatives, CSS Border Radius Generator is a free design utility on FastTool. Design CSS border-radius visually with draggable corner handles and per-corner sliders. Toggle between simple 4-value and advanced 8-value (horizontal/vertical per corner) modes. Apply presets like Circle, Pill, Blob, Organic, Drop, and Leaf shapes. Customize preview box background, border, and dimensions. It includes draggable corner handles on live preview for intuitive adjustment, individual sliders for each corner: top-left, top-right, bottom-right, bottom-left, link all corners toggle for uniform radius. It works in any modern browser and requires zero setup. Whether you are a student, a professional, or just someone who needs a quick design tool, CSS Border Radius Generator has you covered.
Check out: CSS Gradient Generator
Does CSS Border Radius Generator work offline?
After the initial load, yes. CSS Border Radius Generator does not make any server requests during operation, so losing your internet connection will not affect the tool's functionality or cause data loss. All processing logic is downloaded as part of the page and runs entirely in your browser. Save the page as a bookmark for easy access when you are back online, and the tool will work again immediately after the page reloads.
Why choose CSS Border Radius Generator over other design tools?
Unlike many design tools, CSS Border Radius Generator does not require registration or a remote project workspace, and does not lock features behind a paywall or subscription plan. The client-side architecture delivers instant results while reducing unnecessary data movement. You also get a clean, focused interface without the clutter of dashboard features, upsell banners, and account management that most competing platforms include.
You might also find useful: Color Converter (HEX/RGB/HSL/HSV/CMYK)
What languages does CSS Border Radius Generator support?
You can use CSS Border Radius Generator in any of 21 supported languages. The tool uses a client-side translation system that updates the entire interface without requiring a page reload, so switching languages is instant and does not interrupt your work. Full support for right-to-left scripts like Arabic and Urdu is included, with proper layout mirroring. The supported languages span major regions across Europe, Asia, the Middle East, and South America.
Do I need to create an account to use CSS Border Radius Generator?
No account is required. CSS Border Radius Generator is ready to use the moment you open the page in your browser. There are no sign-up forms, no email verifications, no login walls, and no social media authentication prompts. Your usage is completely anonymous — FastTool does not maintain a user database or track individual visitors. Just open the page and start using the tool immediately.
Check out: Color Palette Generator
Common Use Cases
Print Design Preparation
Use CSS Border Radius Generator to convert and verify design values when preparing files for print production. This is a scenario where having a reliable, always-available tool in your browser saves meaningful time compared to launching a desktop application or searching for an alternative.
Responsive Design Testing
Test how your design values translate across screen sizes by using CSS Border Radius Generator to calculate responsive breakpoints, font scales, and spacing systems. The browser-based approach means you can start immediately without any installation, making it practical for time-sensitive situations where setting up dedicated software is not an option.
Design Handoff to Developers
Use CSS Border Radius Generator to generate precise design specifications and tokens that developers can copy directly into code during the handoff process. The instant results and copy-to-clipboard functionality make this workflow fast and efficient, letting you move from task to finished output in a matter of seconds.
Accessibility Audits
Ensure your designs meet accessibility standards by using CSS Border Radius Generator to check contrast ratios, font sizes, and other WCAG-related parameters. The instant results and copy-to-clipboard functionality make this workflow fast and efficient, letting you move from task to finished output in a matter of seconds.
MOST POPULAR
Trending tools on FastTool
The most frequently used tools by our community.
All Design Tools (40)
- 📐 Aspect Ratio Calculator
- ✨ Favicon Generator
- 🖼️ Placeholder Image Generator
- 🔤 Google Fonts Previewer
- 👁️ Color Blindness Simulator
- 🎨 CSS Gradient Animator
- ✏️ SVG Path Editor
- 🎨 WCAG Contrast Checker
- ✨ CSS Animation Generator
- 🎨 Color Name Finder
- 🎨 Color Mixer
- 🌈 Gradient Text Generator
- View all 40 Design tools →
BROWSE BY CATEGORY
Explore all tool categories
Find the right tool for your task across 17 specialized categories.
Featured in FastTool Blog
Articles and guides that reference this tool:
References & Further Reading
Authoritative sources and official specifications that back the information on this page.
- CSS Backgrounds and Borders Module Level 3 - border-radius — W3C
Authoritative border-radius specification
- border-radius - MDN Web Docs — MDN Web Docs
Reference for border-radius
- Rounded rectangle - Wikipedia — Wikipedia
Background on rounded rectangles