Rounded Card
Use a moderate border radius to soften cards, panels and content containers without making the design feel too playful.
CSS Border Radius Generator
Free CSS Shape Tool
Create rounded corners and custom CSS shapes visually. Drag the handles, adjust each corner radius and copy clean CSS border-radius code for your project.
This CSS Border Radius Generator is a free visual tool that helps you create rounded
corners and custom shapes using the border-radius property. You can use
it for buttons, cards, images, profile avatars, containers, decorative shapes and
organic blob-style UI elements.
The tool lets you control each corner visually and generates the CSS automatically. This is useful when you want more than a simple uniform radius and need custom, asymmetric or elliptical corner values.
Use a moderate border radius to soften cards, panels and content containers without making the design feel too playful.
Use a large border radius such as 999px to create pill-shaped buttons,
tags, badges and call-to-action elements.
Use border-radius: 50% on a square image to create a circular profile
photo or icon frame.
Use asymmetric and percentage-based radius values to create fluid blob shapes for hero sections, backgrounds and decorative UI elements.
Combine border-radius with overflow: hidden to crop
images into rounded rectangles, circles or custom shapes.
The border-radius property controls how rounded the corners of an HTML
element are. It can be applied to boxes, buttons, cards, images, inputs and many
other UI elements.
A single value applies the same radius to all four corners.
.box {
border-radius: 20px;
}
You can control each corner separately using individual border radius properties.
.box {
border-top-left-radius: 10px;
border-top-right-radius: 30px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 5px;
}
The border-radius shorthand can accept one, two, three or four values.
.box {
border-radius: 10px 30px 50px 5px;
}
You can use the slash syntax to create elliptical corners with different horizontal and vertical radius values.
.box {
border-radius: 50% / 20%;
}
To create a perfect circle, use border-radius: 50% on an element with
equal width and height.
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
}
For buttons, badges and tags, a very large value such as 999px creates
a pill-shaped element.
.button {
border-radius: 999px;
}
When rounding images or containers with child content, use overflow: hidden
if you want the inner content to follow the rounded shape.
.image-frame {
border-radius: 1rem;
overflow: hidden;
}
50% for circular avatars and icons.overflow: hidden when cropping images into rounded shapes.
The border-radius property rounds the corners of an HTML element. It
can be used on cards, buttons, images, inputs and containers.
Use border-radius: 50% on an element with equal width and height.
Use a large value such as border-radius: 999px. This creates fully
rounded ends on buttons, tags and badges.
Yes. You can use individual properties such as border-top-left-radius,
border-top-right-radius, border-bottom-right-radius and
border-bottom-left-radius.
On a square element, border-radius: 50% creates a circle. On a
rectangular element, it creates an oval shape.
Elliptical border radius uses slash syntax, such as border-radius: 50% / 20%,
to define different horizontal and vertical radius values.
Yes. Apply border-radius to the image or its wrapper. Use
overflow: hidden on the wrapper when needed.