How do I create a circle?

Set all corners to 50% and the element will appear as a circle if its width and height are equal, or as an ellipse otherwise.

When should I use % vs px?

Use % for shapes that should remain round relative to the element's size (like circle avatars). Use px for fixed-radius corners that should not change when the element is resized.

CSS Border Radius Generator — Per-Corner Control with Live Preview

All tools › CSS Border Radius Generator ● Live Developer Tools

Link all corners

Top-left16px

Top-right16px

Bottom-right16px

Bottom-left16px

CSS

border-radius: 16px;

CSS

More Developer Tools tools

CSS Box Shadow Generator

CSS Gradient Generator

.dockerignore Generator

.gitignore Generator

.htaccess Redirect Generator

Aspect Ratio Calculator