Генератор заобљених углова

Visually Design CSS Rounded Corners with Live Preview

The border-radius CSS property is one of the most-used rules in modern UI — it shapes cards, avatars, buttons, badges, tooltips, and decorative blobs. This free CSS border-radius generator gives you a live visual editor where every slider adjustment reflects instantly in a preview element, so you can tune the exact radius you need and see the result in real time before copying the generated CSS.

Adjust each of the four corners independently or link them for uniform rounding. Toggle between px (fixed pixel size) and % (proportional to element dimensions) units. Use the preset shapes library for instant common patterns, generate organic blob shapes with one click, or upload your own image to preview the radius on real content — all processed entirely in your browser, with nothing uploaded to any server.

Shape Presets: Circle, Pill, Card, Egg, and More

The preset library covers the shapes developers reach for most frequently. Circle (border-radius: 50%) turns any square element into a perfect circle — the standard for avatar photos, profile images, and icon containers. Pill (9999px) collapses the short sides into perfect semicircles regardless of element size, producing the classic CTA button or tag shape found in virtually every modern design system.

Card (16px) and Slight (6px) match the rounding values used in most UI kits and component libraries. Top-round and Bottom-round are useful for section separators, stacked list items, and tab bars where only one side should be rounded. The Egg preset uses the full 8-value elliptical slash syntax — border-radius: 50% 50% 50% 50% / 40% 40% 60% 60% — producing an asymmetric curve on each corner, a popular foundation for organic hero art and illustration-style blobs.

Inverted, Concave, and Notched Corners

A frequent search is for an inverted border radius generator — corners that curve inward rather than outward. Plain border-radius can only produce convex (outward) curves, so true concave corners need a different technique. The most reliable approach is a radial-gradient mask: place a small transparent circle at each corner you want to bite inward, which carves a concave notch out of the element while keeping the rest solid. This is how ticket stubs, coupon edges, and tab shapes get their inward curves.

An alternative is a positioned pseudo-element (::before or ::after) painted with the page background colour and given its own outward border-radius, then layered over a corner so it appears to cut inward. For scalloped or perforated edges — like a ticket's tear line — a repeating radial-gradient mask along one side does the job. While this generator focuses on standard convex radii and organic blobs, knowing the mask trick lets you cover the concave cases that css inverted border radius generator searches are really after.

Why This Generator Beats cssmatic.com, css-tricks.com, and bennettfeely.com

cssmatic.com offers a basic border-radius generator but has not been updated in years — it lacks image upload, blob randomization, and modern preset shapes. The css-tricks.com almanac is excellent reference documentation but not an interactive tool. bennettfeely.com's clip-path maker is powerful for complex polygon shapes but targets CSS clip-path rather than border-radius, requiring SVG-style coordinate input rather than intuitive sliders.

UtiloKit's border-radius generator combines everything in one tool: a slider-based live editor, a preset library covering all common UI shapes, random blob generation using the advanced 8-value slash syntax, px/% unit switching, an image upload preview processed 100% client-side, and three output formats (CSS property, value only, and React inline style). No ads, no watermarks, no account required, and no images or design data sent to any server — your images never touch a backend server.

px vs % vs Blob: Choosing the Right Approach

Use px when you want a consistent corner size regardless of element dimensions — the standard for design-system components like cards, inputs, modals, and dropdown menus where the corner size is a fixed design token. Use % when the shape should stay proportional to the element — 50% always produces a circle on a square element and a proper ellipse on a rectangle, regardless of the element's actual pixel dimensions.

For decorative blob shapes, click Random Blob to generate an asymmetric 8-value CSS value such as border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Each click produces a different organic form. Once you see a blob you like, copy the CSS and apply it to background elements, decorative dividers, or abstract hero illustrations. The blob feature uses the slash syntax where horizontal and vertical radii differ per corner, creating shapes that are impossible to produce with four-value shorthand alone.

Preview With Your Own Image — Client-Side, Private, Instant

Upload any photo directly into the preview area to test how your border-radius looks on real imagery. The image is loaded using the browser's File API and rendered using a local object URL — it never leaves your device. No upload, no server processing, no cloud storage. This makes the tool particularly useful when designing circular avatars, rounded media thumbnails, or gallery cards where the exact clip shape matters and you want to verify the crop before implementing in code.

In CSS, rounding an image works two ways: apply border-radius directly to the <img> tag for simplicity, or use a wrapper <div> with overflow: hidden for more layout flexibility. The wrapper approach lets you control aspect ratio, padding, and positioning on the outer element while the border-radius clips the overflow. Both approaches are demonstrated in the generated CSS output.

Cross-Device: Desktop, iPhone, Android, and Any Modern Browser

The border-radius generator runs in any modern browser without installation. On desktop, the full three-column layout gives you sliders on the left, a large live preview in the centre, and generated CSS on the right. On iPhone and Android, the layout collapses responsively to a single-column vertical stack that is fully touch-friendly. Sliders respond to touch-drag gestures, the image picker integrates with your device's native file browser, and the copy button uses the Web Clipboard API supported by all modern mobile browsers.

Nothing is installed, nothing is signed in to, and nothing is rate-limited. The tool processes all input locally using client-side JavaScript — sliders update the preview with zero network latency because there is no server involved. Generate border-radius values for any project — personal sites, client work, design handoff, or CSS learning — with complete privacy and no friction.

The Mathematics of CSS Border-Radius: Elliptical Corners and the Slash Syntax

Under the hood, border-radius is shorthand for four independent longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. What most developers miss is that each of these longhands accepts two values — a horizontal radius and a vertical radius — which the browser uses to draw a quarter of an ellipse rather than a quarter of a circle. Writing border-top-left-radius: 30px 60px places an elliptical arc at the top-left corner with a 30 px horizontal sweep and a 60 px vertical sweep, producing a distinctly squashed or stretched curve rather than a uniform circular arc.

The shorthand exposes this elliptical control through a slash separator: everything to the left of the slash defines all four horizontal radii, and everything to the right defines all four vertical radii. For example, border-radius: 10px 20px / 30px 40px sets a 10 px horizontal and 30 px vertical radius on the top-left, and a 20 px horizontal and 40 px vertical radius on the other corners (following the standard top-left → top-right → bottom-right → bottom-left clockwise rule). This is how the organic blob and egg shapes are constructed: combinations like border-radius: 50% 50% 50% 50% / 40% 40% 60% 60% create corners where horizontal and vertical curves differ, yielding the irregular, amoeba-like outlines that have become ubiquitous in hero sections and decorative backgrounds.

Percentage resolution follows a less obvious rule: percentage horizontal radii are resolved against the element's width, while percentage vertical radii are resolved against the element's height — not against the diagonal, not against some average, and not against a common reference length. This means that border-radius: 50% on a 200 px × 100 px element resolves to corner arcs of 100 px horizontal by 50 px vertical — an ellipse, not a circle — and only on a perfectly square element does 50% produce a true circle. The pill hack (border-radius: 9999px) exploits this by supplying an absolute value so large that the browser's overlap-prevention algorithm clamps it to exactly half the shorter dimension regardless of element size, guaranteeing perfect semicircular ends on any rectangle without requiring any calculation.

Squircles, Superellipses, and Why CSS Rounded Rectangles Are Not the Same Thing

Every iPhone app icon since iOS 7 is a squircle — a shape that sits geometrically between a square and a circle, defined by the superellipse equation |x/a|^n + |y/b|^n = 1 where the exponent n is greater than 2. When n = 4, the result is the canonical squircle: a form with continuously varying curvature that accelerates smoothly from the flat sides into the corners with no abrupt transition. A standard CSS rounded rectangle, by contrast, is built from straight edges joined to circular arc segments — the curvature is zero along the straight sections and then jumps to a fixed value at the corner arc, creating a mathematically discontinuous boundary. That sharp transition is subtle at small radii but becomes clearly visible at larger radii, which is why CSS-rounded interfaces can look slightly mechanical compared to the squircle shapes used in physical hardware and Apple's human interface guidelines.

Apple introduced continuous corner curvature formally with iOS 7 in 2013, and Figma later added a "smooth corners" toggle (internally called a smart corner radius) to its shape editor, letting designers approximate a squircle without manually drawing SVG paths. In CSS, a true squircle cannot be rendered with border-radius alone because the property only supports circular arc segments. Reasonable approximations exist using clip-path: path() with a hand-tuned SVG cubic Bézier path, or using an SVG element with a <feTurbulence>-free superellipse path, but these require either design-tool export or a JavaScript calculation step. The shape() CSS function, currently in draft behind browser flags, promises to bring squircle-quality continuous curvature into native CSS in a future specification cycle.

For practical UI work, understanding the squircle distinction matters most in iconography and high-visibility button design. Research on shape recognition indicates that continuous-curvature boundaries introduce fewer perceptual "seams" for the visual system, potentially reducing the low-level cognitive effort needed to parse the shape. That said, the visual difference between a CSS rounded rectangle at ~27–30% radius and a squircle is small enough that it rarely affects conversion metrics — the more consequential factor is whether the radius value is consistent with the surrounding design tokens. The squircle is therefore a refinement for brand-critical surfaces (app icons, hero illustrations, flagship product images) rather than a requirement for everyday component rounding.

Border-Radius in Design Systems: Radius Tokens, Shape Scales, and Morphing Animations

Material Design 3 codifies corner rounding as an eight-tier shape scale: None (0 px), Extra Small (4 px), Small (8 px), Medium (12 px), Large (16 px), Extra Large (28 px), and Full (9999 px), with each tier mapped to specific component types — chips and badges use Extra Small, cards and dialogs use Medium, bottom sheets use Large, FABs use Full. Tailwind CSS follows a similar philosophy with named utility classes: rounded-sm (2 px), rounded (4 px), rounded-md (6 px), rounded-lg (8 px), rounded-xl (12 px), rounded-2xl (16 px), rounded-3xl (24 px), and rounded-full (9999 px). Both systems make the same fundamental choice: a small number of named semantic tokens, not arbitrary per-component pixel values. When you pull a value from a generator tool, map it to the nearest token in your system rather than hard-coding the raw pixel number — this keeps the interface cohesive across components that share a visual weight.

The design rationale for consistent radius tokens is coherence: when every element in a product — buttons, cards, inputs, modals, chips — draws its corner size from the same stepped scale, the interface reads as intentional and unified. Mixing arbitrary values (3 px, 7 px, 11 px) across components creates low-level visual tension that users perceive as polish degradation even if they cannot articulate why. The deliberate exception is interactive elements: buttons, chips, and toggles typically use larger radius values than their structural containers (cards, panels, sidebars) precisely to signal affordance — a fully-rounded pill button visually "feels" tappable in a way that a sharp-cornered rectangle does not. This radius-as-affordance cue is why most design systems intentionally break uniform rounding at the component boundary.

Animating border-radius with CSS transitions or JavaScript libraries like GSAP opens a category of satisfying morphing effects. A simple transition: border-radius 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) can animate a card from a rectangular 12 px radius to a fully circular 50% on hover, communicating a state change with motion rather than colour alone. For more organic movement, @keyframes can cycle through a series of different eight-value slash radius values — moving from 30% 70% 70% 30% / 30% 30% 70% 70% to 70% 30% 30% 70% / 70% 70% 30% 30% and back — producing a blob morphing animation popular in hero backgrounds, loading states, and abstract art direction. Because border-radius animation triggers a repaint on every frame, apply will-change: border-radius on elements that morph continuously, and prefer animating on elements with simple paint content (no heavy box-shadows or complex backgrounds) to keep the frame rate smooth.