Design und Assets
Border-Radius-Generator
Generate border-radius CSS, preview rounded corners, and copy the exact radius code.
Border-Radius-Generator
Border-Radius CSS
.radius-preview {
width: min(100%, 320px);
height: 150px;
border-radius: 12px 12px 20px 20px;
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: white;
display: grid;
place-items: center;
}What a border radius generator helps with
A border radius generator is useful when you want consistent rounded corners across cards, buttons, inputs, avatars, and image masks. Instead of guessing the values in DevTools, you can tune each corner and copy the exact CSS.
This page is most helpful when you need four independent corner values, quick previews, and code you can paste directly into Tailwind layers, CSS modules, or component styles.
Border radius generator FAQ
How do I generate different border radius values for each corner?
Enter separate top-left, top-right, bottom-right, and bottom-left values. The tool builds the matching four-value border-radius CSS for you.
What is a good border radius for cards and buttons?
Many interfaces use 6px to 16px for buttons and 12px to 24px for cards, but the right value depends on the component size and design style.
Can I use percentages instead of pixels?
Yes. Use the unit selector to switch the output if you want percentage-based rounded corners.