{"id":87,"date":"2026-05-04T20:09:13","date_gmt":"2026-05-04T20:09:13","guid":{"rendered":"https:\/\/simpletool.io\/blog\/?p=87"},"modified":"2026-05-04T20:09:13","modified_gmt":"2026-05-04T20:09:13","slug":"css-border-radius-generator","status":"publish","type":"post","link":"https:\/\/simpletool.io\/blog\/css-border-radius-generator\/","title":{"rendered":"CSS Border Radius Generator: Per-Corner & Blob [2026]"},"content":{"rendered":"\r\n
TL;DR:<\/strong> A CSS border radius generator builds rounded-corner styles visually \u2014 uniform corners, per-corner radii, or organic “blob” shapes via the elliptical syntax. Modern UI uses 8-16px on cards, 6-10px on buttons, 999px (or 50%) for fully rounded pills. Our free generator<\/a> produces both the 4-value and 8-value (elliptical) syntaxes with live preview.<\/div>\r\n\r\n\r\n\r\n

Border radius is the design primitive that shifted UIs from sharp corners (1995-2010) to soft corners (2010-now) and is now the difference between “modern” and “dated” interfaces. Get the value right and your card looks polished; get it wrong and it looks like a bootstrap default. Most CSS border-radius generators only show the simple uniform-corner case; the interesting work is per-corner control and the rarely-used elliptical syntax that produces organic blob shapes.<\/p>\r\n\r\n\r\n\r\n

Our CSS border radius generator<\/a> handles all three modes \u2014 uniform, per-corner, and elliptical \u2014 with a live preview and copy-ready CSS. This guide explains the right values for each UI element, the elliptical syntax that produces blob shapes, and the framework-specific shortcuts.<\/p>\r\n\r\n\r\n\r\n

Standard border-radius values for UI elements<\/h2>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Element<\/th>\r\nRecommended radius<\/th>\r\nNotes<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
Cards<\/td>\r\n8-16 px<\/td>\r\nStripe and Linear use 12px; Apple HIG uses 14px<\/td>\r\n<\/tr>\r\n
Buttons<\/td>\r\n6-10 px<\/td>\r\nPills (999 px) for marketing CTAs<\/td>\r\n<\/tr>\r\n
Form inputs<\/td>\r\n4-8 px<\/td>\r\nMatch your buttons to keep visual rhythm<\/td>\r\n<\/tr>\r\n
Avatars<\/td>\r\n50% (perfect circle)<\/td>\r\nOr 999px which works the same on small elements<\/td>\r\n<\/tr>\r\n
Tags \/ chips<\/td>\r\n999 px (pill)<\/td>\r\nModern look; 4 px reads as old-school<\/td>\r\n<\/tr>\r\n
Modals \/ dialogs<\/td>\r\n12-20 px<\/td>\r\nSlightly softer than cards for visual hierarchy<\/td>\r\n<\/tr>\r\n
Code blocks<\/strong><\/td>\r\n6-10 px<\/td>\r\nMatch cards or buttons in your design system<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n\r\n\r\n

The “design system rhythm” rule:<\/strong> use 2-3 distinct radius values across your UI, not one per component. A typical system: 6 px (form inputs, small buttons), 12 px (cards, tags-as-rectangles), 999 px (pills, avatars, dots). Inconsistent radii (6\/8\/10\/14 mixed across components) reads as unintentional.<\/p>\r\n\r\n\r\n\r\n

Per-corner border radius \u2014 when uniform won’t do<\/h2>\r\n\r\n\r\n\r\n
\/* Uniform \u2014 all four corners *\/\r\nborder-radius: 12px;\r\n\r\n\/* Per-corner: top-left, top-right, bottom-right, bottom-left *\/\r\nborder-radius: 12px 12px 0 0;       \/* card with attached top *\/\r\nborder-radius: 0 12px 12px 0;       \/* tab attached to left side *\/\r\nborder-radius: 12px 12px 12px 4px;  \/* speech-bubble pointer *\/<\/code><\/pre>\r\n\r\n\r\n\r\n
Per-corner control is essential for tabs, speech bubbles, attached cards, and any element that visually “connects” to another. The 4-value shorthand follows the same clockwise order as padding<\/code> and margin<\/code> \u2014 top, right, bottom, left.<\/p>\r\n\r\n\r\n\r\n
Elliptical border radius \u2014 the blob shape secret<\/h2>\r\n\r\n\r\n\r\n
The 8-value border-radius syntax produces elliptical corners, which when used asymmetrically across corners creates organic “blob” shapes:<\/p>\r\n\r\n\r\n\r\n
\/* The full syntax: horizontal-radii \/ vertical-radii *\/\r\nborder-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%;\r\n\/*              ^---horizontal--^   ^----vertical---^\r\n   tl, tr, br, bl                 tl, tr, br, bl  *\/<\/code><\/pre>\r\n\r\n\r\n\r\n
Each corner gets two radii (horizontal + vertical), making the corner an ellipse rather than a circle. When the values are deliberately asymmetric, the result reads as organic \/ hand-drawn \u2014 useful for hero illustrations, decorative shapes, and modern “blob” backgrounds. Our generator includes a “blob” mode that randomises asymmetric values for instant organic shapes.<\/p>\r\n\r\n\r\n\r\n
How to use the browser border radius generator<\/h2>\r\n\r\n\r\n\r\n
    \r\n
  1. Open the CSS border radius generator<\/a><\/li>\r\n
  2. Pick a mode: Uniform (one slider for all four corners), Per-corner (4 sliders), or Blob (8 values, randomisable)<\/li>\r\n
  3. Drag sliders to shape the preview<\/li>\r\n
  4. Toggle preset (Card, Pill, Avatar, Tab-left, Tab-right, Speech bubble, Blob)<\/li>\r\n
  5. Copy CSS or Tailwind utility output<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n
    Tailwind CSS shortcuts<\/h2>\r\n\r\n\r\n\r\n
    rounded-none    \/* 0 *\/\r\nrounded-sm      \/* 2px *\/\r\nrounded         \/* 4px *\/\r\nrounded-md      \/* 6px *\/\r\nrounded-lg      \/* 8px *\/\r\nrounded-xl      \/* 12px *\/\r\nrounded-2xl     \/* 16px *\/\r\nrounded-3xl     \/* 24px *\/\r\nrounded-full    \/* 9999px *\/\r\n\r\n\/* Per-corner *\/\r\nrounded-t-lg                    \/* top-left + top-right *\/\r\nrounded-tl-lg                   \/* top-left only *\/\r\nrounded-tl-2xl rounded-br-2xl   \/* mixed corners *\/<\/code><\/pre>\r\n\r\n\r\n\r\n
    Common mistakes<\/h2>\r\n\r\n\r\n\r\n