CSS Border Radius Generator
Craft CSS border-radius with per-corner control and a live preview.
Runs in your browser
Loading tool…
Designed to run in your browser. See the privacy policy.
About CSS Border Radius Generator
This CSS border radius generator lets you round the corners of a box with sliders and see the result on a live preview square. Each corner can be set from 0 to 200 pixels, and the matching border-radius declaration is written out for you to copy straight into your stylesheet.
It is handy when you want to try out shapes such as pills, tabs, speech-bubble corners or leaf shapes without editing CSS and reloading. Everything is calculated in your browser as you drag.
How to use
- Leave "link all corners" on to round every corner by the same amount with any one slider.
- Turn "link all corners" off to set the top-left, top-right, bottom-right and bottom-left sliders independently.
- Watch the preview square update as you drag each slider.
- Copy the CSS line from the CSS panel and paste it into the rule for your element.
FAQ
What order are the four values in border-radius?+
The shorthand lists corners clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. So "border-radius: 10px 20px 30px 40px;" gives 10px at top-left and 40px at bottom-left. When all four corners match, the generator outputs a single value instead.
How do I make a circle or a pill shape?+
For a circle, give a square element a radius of at least half its width, or use 50% in your own CSS. For a pill, use a radius equal to or larger than half the element height; browsers scale overlapping radii down so the curves fit, which is why a very large value such as 9999px is a common trick. This generator works in pixels only, so switch to a percentage by hand if you need one.
Can I create elliptical corners with different horizontal and vertical radii?+
Not with this tool. CSS supports elliptical corners using the slash syntax, for example "border-radius: 50px / 25px;", but the generator produces circular radii only. You can start from its output and add the slash part yourself.
Does border-radius clip the content inside the element?+
It rounds the background and border, but child content such as an image can still poke out past the curve. Add overflow: hidden to the element if you want its contents clipped to the rounded shape.
Is border-radius supported in all browsers?+
Yes. The unprefixed border-radius property works in every current browser, so the -webkit- and -moz- prefixes once needed for it are no longer required.