Border Radius Generator: CSS Rounded Corners
Free CSS border-radius generator. Set each corner in px or %, try presets like pill, circle and leaf, and copy the CSS in one click.
The border-radius property rounds the corners of an element. One value rounds all four corners equally, and four values set each corner in order: top left, top right, bottom right, bottom left.
Use 50% on a square element to make a circle, or a large pixel value like 100px for pill-shaped buttons. More generators: CSS Gradient, Glassmorphism, Neumorphism and CSS Buttons.
How to make rounded corners in CSS
Add border-radius to any element. One value rounds all four corners equally, and four values set each corner clockwise, starting from the top left:
css
.card {
border-radius: 12px;
}
.ticket {
border-radius: 24px 4px 24px 4px;
}
Did you like this tool? Share it with your friends:
Want to learn more? Ask your AI: