Border Radius & Clip Path Generator
Round every corner independently or cut custom shapes with clip-path — live preview, instant CSS.
Also known as: Border radius tool, Clip-path maker, CSS shape generator
How it works
- 1Choose a mode: Border Radius or Clip Path.
- 2For border-radius, adjust each corner independently or toggle "link all corners" for a uniform radius.
- 3For clip-path, click a shape preset — triangle, hexagon, star, and more.
- 4Copy the generated CSS and paste it into your stylesheet.
Why use Border Radius & Clip Path Generator
Two shaping techniques in one tool
Border-radius for rounded rectangles and clip-path for custom polygon shapes, so you use the right property.
Independent per-corner control
Round each corner differently, not just a single uniform radius, with an optional link toggle.
12 ready-made clip-path shapes
Triangle, hexagon, star, arrow, speech bubble, and more — no hand-writing polygon coordinates.
Live, accurate preview
See the exact shape rendering against an adjustable color before copying the CSS.
Clean, single-declaration output
One border-radius or clip-path line, ready to paste with no extra tooling required.
Nothing leaves your browser
Every shape is rendered and computed locally — nothing about your design is ever transmitted.
Who uses Border Radius & Clip Path Generator
Rounding corners on a card or button asymmetrically
Give one or two corners a larger radius than the others for a distinctive, modern look.
Cutting a hero image into a custom shape
Apply a hexagon, arrow, or angled clip-path to break up a standard rectangular image.
Creating a speech-bubble or notification shape
Use the message-bubble preset for chat UI, tooltips, or callouts without an image asset.
Building a badge or ribbon shape
Star, cross, and arrow presets work well for badges, ribbons, and decorative UI accents.
Matching a design system's corner radius tokens
Dial in exact per-corner pixel values to match an existing design system's radius scale.
About Border Radius & Clip Path Generator
border-radius and clip-path solve different problems that often get confused: border-radius only rounds corners of a rectangle — it can't create angles, points, or non-rectangular outlines. clip-path can cut an element into virtually any shape, including polygons with sharp points, but doesn't support smooth rounded corners as naturally. This tool gives you both, side by side, so you reach for the right one instead of fighting the wrong property.
Border-radius mode exposes all four corners — top-left, top-right, bottom-left, bottom-right — as independent sliders (0–200px), with an optional "link all corners" toggle for the common case of a uniform radius. The live preview updates instantly, and the generated CSS is a single border-radius shorthand in the standard top-left/top-right/bottom-right/bottom-left order.
Clip-path mode ships 12 presets covering the shapes people actually reach for: triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star, arrow, message bubble, cross, and circle. Each preset is a hand-tuned polygon() (or circle()) value — click one to apply it instantly and see the exact CSS clip-path needed to reproduce that exact shape.
Both modes render against a live color-adjustable preview box so you can judge the shape against your actual brand color before copying the CSS, and both output a single, clean CSS declaration — border-radius or clip-path — ready to paste directly into a stylesheet. Everything runs locally in your browser; nothing about your design is ever transmitted.
Border Radius & Clip Path Generator vs. other options
How Open Tools Library compares to desktop software and other online tools.
| Feature | Open Tools Library | Desktop software | Other online tools |
|---|---|---|---|
| Price | Free, unlimited | Varies | Often paywalls clip-path shapes |
| Independent corner control | Included, free | Varies | Often uniform-only |
| Clip-path shape presets | 12, free | Varies | Often very limited |
| Account required | No | No | Sometimes required |
| Data privacy | Never leaves your device | Local | Often server-rendered |
Pro tips
- For a "squircle" or app-icon-style look, use a large, linked border-radius rather than clip-path.
- clip-path shapes cut away part of the element entirely — content near the cut edges may get clipped too, so leave padding room.
- border-radius affects the box's visual corners but not its actual clickable/hit area; clip-path affects both the visual shape and, in most browsers, the hit area.
- Combine a subtle border-radius with a box-shadow for a softer, more polished rounded-corner look than radius alone.
Technical specs
- Modes
- Border radius, clip-path
- Border-radius range
- 0 to 200px per corner
- Clip-path presets
- 12 shapes
- Output
- Single CSS declaration (border-radius or clip-path)
- Processing location
- 100% local, in your browser
Privacy & security
A shape is just numbers and coordinates — there's no reason designing one should ever require a server round-trip.
Every shape is rendered and computed entirely in your browser using plain CSS.
Nothing you design — corner values, shape choice — is transmitted or logged anywhere.
No account, no email, no login — just a shape choice in, CSS out.
The same local-only guarantee applies whether you're prototyping or finalizing production CSS.
Frequently asked questions
What's the difference between border-radius and clip-path?
border-radius only rounds the corners of a rectangular box; clip-path can cut an element into any polygon or curved shape, including sharp points that border-radius can't produce.
Can I combine border-radius and clip-path on the same element?
Technically yes, but clip-path generally overrides the visual effect of border-radius since it redefines the element's visible shape entirely — use one or the other for predictable results.
Is this free for commercial projects?
Yes — the generated CSS is plain, standard CSS with no license restrictions.
Do border-radius and clip-path need vendor prefixes?
No — both are supported unprefixed in all modern browsers.
Troubleshooting
My clip-path shape is cutting off content I wanted visible
clip-path clips everything outside the shape, including text and child elements — add padding inside the element or adjust the shape's coordinates to leave room for your content.
border-radius isn't rounding a background image
Make sure the element has overflow: hidden if the background image or a child element is visually escaping the rounded corners.
The shape preview doesn't match after I paste the CSS
Check for a competing border-radius or clip-path rule elsewhere in your stylesheet with higher specificity overriding the generated value.
Related searches
Landed here looking for something worded a little differently? Border Radius & Clip Path Generator covers all of these too:
Ready to use Border Radius & Clip Path Generator?
Free, private, and ready right now — no signup required.
Scroll to Border Radius & Clip Path Generator