Pembulat Sudut Imej

Round image corners online — no Photoshop needed

This image corner rounder softens the corners of a photo, logo, avatar or screenshot and hands you a clean transparent PNG. Drop in an image, drag the radius slider, and the live preview updates instantly on a checkerboard backdrop so you can see exactly where the transparency falls before you download. You can paste from the clipboard with Ctrl/⌘-V, drag a file onto the canvas, or browse your device — whichever is faster.

It's the fast, no-app way to round image corners without Photoshop — no upload, no sign-up, and no watermark. Everything runs in your browser. The original resolution is preserved and only the corners are clipped to transparency, so there is no quality loss anywhere in the image. Unlike Fotor or Adobe Express, no account is required and no paid plan is needed for a clean download.

Per-corner control, circles and squircles

Switch the radius unit between % and px, then round all four corners at once or turn on per-corner mode to set the top-left, top-right, bottom-right and bottom-left independently. Per-corner rounding is useful for chat bubbles, card components and tab shapes that round only one or two corners while keeping the others sharp.

One-tap presets jump to Square, Subtle, Card, Circle/pill (maximum radius) and Squircle — the smooth iOS-style superellipse used for app icons and modern UI components. Push a square image to 50% for a perfect circle, or a rectangle for a pill shape. Each preset shows the current radius as both a percentage and a pixel value, so you can copy it into Figma, CSS, or any design tool.

Transparent PNG vs JPG — which keeps rounded corners

Rounded corners only stay see-through in a format with an alpha channel, which is why the default export is a rounded corner PNG. JPG has no transparency, so the tool fills the corner areas with your chosen background color when you export as JPG — choose that option only when you know the exact final background and want a flat, smaller file.

The output panel shows the exact pixel dimensions and an estimated file size before you download, so you know whether you'll get a transparent edge or a solid fill. For web assets, app icons and email signatures, PNG is the right choice. For profile pictures on platforms that accept only JPG, set a matching background color and export as JPG.

How this compares to Fotor, Adobe Express and similar tools

Several tools offer corner rounding, but each has a catch. Fotor puts a watermark on every export unless you upgrade to Fotor Pro ($8.99/month). Adobe Express requires a free Adobe account and restricts higher-resolution exports to paid Creative Cloud subscribers. Canva's rounded corner feature works within Canva, but exporting a standalone transparent PNG without a subscription is limited — and Canva's results are tied to the Canva file rather than saved as a reusable image asset.

This tool has no watermark, no account, no export cap, and no subscription. The image never leaves your device, so there is no privacy trade-off either. Every feature — per-corner control, squircle preset, border, background fill, percentage download sizes — is available at no cost.

Backgrounds, borders and avatar-sized exports

Add a solid background color to fill the corners when placing a rounded photo on a known card or page color, or keep them transparent for full flexibility across different backgrounds. Toggle an optional border with adjustable width and color to frame avatars, profile pictures and product thumbnails with a clean outline.

Need a smaller file for a specific use? Pick a Download size of 75%, 50% or 25% to export a lightweight, perfectly proportional thumbnail. The rounding, fill and border are all drawn on the canvas at the target size rather than downscaled after the fact, so the image stays crisp with no blurry anti-aliasing at smaller dimensions.

Rounding corners in Slides, PowerPoint, Canva, Docs and Photoshop

Every major design or presentation app can round corners, but each does it differently with different limitations. Google Slides hides it under the Crop → Shapes dropdown with no numeric radius input. PowerPoint uses Crop to Shape → Rounded Rectangle with a drag handle and no exact value control. Canva has a Rounded corners slider but watermarks free exports and limits precise control to Pro. Google Docs has no native corner-rounding option for inserted images. Photoshop requires a rounded-rectangle clipping mask setup across several layers.

The tool includes quick step-by-step notes for each app in the FAQ above, but rounding the image here once gives you a precise, reusable transparent PNG you can paste into any of them — and into email signatures, websites, mobile apps, and anywhere else that has no built-in corner control. One download, works everywhere.

The mathematics of rounded corners: arcs, radii and CSS border-radius

A rounded corner is geometrically a quarter-circle arc whose radius equals the corner-radius value you set. Where a straight edge meets a curve, the arc must be tangent to both edges — meaning it touches each edge at exactly one point with no kink. In CSS, the border-radius property is shorthand for up to eight values: each of the four corners can carry separate horizontal and vertical radii, separated by a / character (border-radius: 30px / 15px produces a flatter, elliptical arc rather than a circular one). The familiar border-radius: 50% trick for circles works because 50% of a square element's width and 50% of its height are equal, so the four quarter-ellipses join into a perfect circle; on a rectangle, 50% produces a pill (stadium) shape instead.

The four-value shorthand follows a clockwise order starting at the top-left: border-radius: TL TR BR BL. Three values mean TL TR+BL BR (the omitted fourth mirrors the second). Two values mean TL+BR TR+BL (diagonal pairs share a value). Individual longhand properties — border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius — override the shorthand for a single corner. With enough creativity, CSS border-radius alone can produce leaf shapes (two adjacent corners set to 100%, two set to 0), egg shapes (asymmetric horizontal and vertical radii), and cheese-wedge curves. For more complex clipping — arbitrary polygons, SVG paths, or inset shapes — CSS clip-path takes over where border-radius stops.

The CSS equivalent of any radius you set in this tool appears in the output panel so you can copy it straight into a stylesheet. For images already published on a web page, a single CSS rule can replace a manual export entirely: img.rounded { border-radius: 12px; } This tool is most useful when the image needs to travel to a context where CSS doesn't apply — slides, email, native mobile apps, or exported design assets.

The squircle: Apple's superellipse and continuous-curvature corners

Apple's app icon shape — introduced with iOS 7 in 2013 and used on every iPhone home screen since — is not a simple rounded rectangle. It is a superellipse, defined by the formula |x/a|ⁿ + |y/b|ⁿ = 1 where the exponent n is approximately 5 rather than the value of 2 that produces an ordinary ellipse. At n ≈ 5, the curve stays almost straight along the sides and transitions into a tight, smooth bend at each corner. The shape is commonly called a squircle — a portmanteau of square and circle — because it sits visually midway between the two. Spotify, Instagram, WhatsApp and virtually every iOS app icon on your home screen lives inside this shape.

The key difference from a simple border-radius rounded rectangle is curvature continuity. A circular arc has a discontinuity at the point where it meets the straight edge: the curvature instantly jumps from zero (flat line) to 1/r (the arc). This discontinuity creates a subtle but perceptible visual kink that industrial designers call a G1 joint. A superellipse has no such jump — the curvature changes gradually all the way from the flat side into the maximum curve at the corner. Designers call this G2 continuity, and it is the same property that makes iPhone chassis edges, Apple Watch faces and premium car body panels look smoother than machined right-angle shapes with bolted-on fillets.

Android uses a different approach: adaptive icons define a 108×108 dp canvas with a 72×72 dp safe zone, and the device's launcher applies its own clip shape — a circle on Pixel phones, a squircle on Samsung, a teardrop on some MIUI skins. This means the same app icon can appear as different shapes on different devices, which is why Android developers supply a foreground-plus-background layered icon rather than a pre-shaped PNG. The squircle preset in this tool applies a CSS approximation of the superellipse using a large border-radius value combined with fine-grained per-corner tuning, giving a visually convincing result for UI mockups, app store screenshots and marketing assets without needing an SVG clip path.

Rounded corners in UI design: psychology, history and the card pattern

Cognitive psychology research gives a clear explanation for why rounded shapes dominate modern UI design. In a widely cited 2006 study, Moshe Bar and Maital Neta found that people consistently rate objects with sharp, pointed contours as more threatening or unpleasant than objects with rounded contours — even when the objects are abstract and meaningless. The mechanism is the amygdala, the brain's threat-detection center, which fires more strongly in response to angular shapes. Rounded corners reduce this low-level alerting signal, making interfaces feel calmer, safer and more approachable. This is not an aesthetic preference that changes with trends; it is a consistent finding across cultures and ages.

The design history of the digital rounded corner is closely tied to the original iPhone (2007), whose physical chassis carried a deliberately calculated 9 mm corner radius — a number Steve Jobs reportedly insisted on over engineering objections. iOS's screen icons matched this radius, and the entire operating system UI followed suit. iOS 7 in 2013 stripped skeuomorphic textures from Apple's interface while deliberately keeping rounded corners as the primary shape of buttons, cards and panels. That decision established rounded corners as the defining visual grammar of flat design, influencing Android's Material Design (launched 2014), Microsoft's Fluent Design, and essentially every major design system built in the decade that followed.

The dominant web layout unit of the 2010s and 2020s is the card — a bounded rectangular container, invariably with rounded corners, that holds a discrete piece of content. Material Design codified the pattern in 2014, but the card's appeal comes precisely from the combination of a visible boundary (giving structure) and soft corners (reducing visual aggression). Research in visual perception shows that rounded rectangular frames direct the eye toward the interior content more effectively than sharp frames, which draw attention to the corners themselves. For product designers, this means that border-radius is not decoration — it is a functional choice that affects where users look and how safe or engaging the interface feels.