Build automated workflows with N8N!•Free .com.tr domain on annual purchases•Virtual Server plans starting from ₺149.90•Free SSL certificate on hosting plans•10% off VDS and Performance servers with code TANISMA2026•Build automated workflows with N8N!•Free .com.tr domain on annual purchases•Virtual Server plans starting from ₺149.90•Free SSL certificate on hosting plans•10% off VDS and Performance servers with code TANISMA2026•
CSS Border Radius Generator
Adjust each corner individually and get rounded-corner CSS code with a live preview.
Runs in your browser, no data sent Free · No sign-up required
20px
20px
20px
20px
border-radius: 20px 20px 20px 20px;
Create rounded corners
Rounded corners are one of the building blocks of modern interface design; they give cards, buttons, and input fields a soft, friendly look. Adjust each corner individually to create unique shapes and grab the ready-to-use CSS code in one click.
Frequently Asked Questions
border-radius is the CSS property that rounds an element's corners. With a single value you can round all corners, or with four separate values you can round each corner independently (top left, top right, bottom right, bottom left in order).
To make an element a full circle/oval, set the border-radius value to 50%. In this tool, if you set all corners to half the element's size you get a circle.
Pixels (px) give a fixed radius independent of the element's size. Percent (%) scales with the element's size. px is usually preferred for buttons, while % is preferred for circular elements like avatars.
Related Tools
Online HTML Editor
Write your HTML, CSS and JavaScript code and see the result instantly in a live preview.
JSON Formatter & Validator
Beautify messy JSON data, find errors or minify it to a single line.
Base64 Encoder / Decoder
Instantly encode text to Base64 or decode it back from Base64. Unicode is supported.
Fast, secure, Turkey-based hosting
Move your website to Clou.TR with NVMe SSD, free SSL and a 99.9% uptime guarantee.