CSS Border Radius Generator
Round each of the four corners and generate border-radius code instantly
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool lets you adjust the radius of each of the four corners with sliders, check it in a preview, and generate the border-radius CSS. With px and % units and simultaneous adjustment of all four corners, it's useful for developers refining the rounded corners of buttons, cards, and images.
How to use
- Adjust the radius with each corner's slider.
- Choose px or % units, and turn on 'Adjust all four corners together' if you like.
- Check the shape in the preview box.
- Copy the generated border-radius code and use it.
FAQ
- What's the difference between px and %?
- px is a fixed radius, while % is a radius proportional to the element's size. Giving a square 50% makes it a perfect circle.
- What does the code look like when all four corners are equal?
- When the four values are the same, it's output concisely as a single value like border-radius: 16px;. When they differ, the four directional values are written in order.
- Is the value I enter sent to a server?
- No. All previewing and code generation happen entirely within your browser and are never sent to a server.