CSS Border Radius Generator
Craft perfect rounded corners for every element — independently or uniformly.
Corner Values
Preview
CSS Output
border-radius: 8px;
The border-radius property rounds the corners of an element. Each corner can be set independently: top-left, top-right, bottom-right, bottom-left. Use % values to create elliptical shapes (50% creates a circle or oval). The shorthand follows clockwise order starting from top-left.
Frequently Asked Questions
- Yes. Toggle off the "uniform" mode to set individual values for top-left, top-right, bottom-right, and bottom-left corners.
Related Tools
CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visuallyCSS Specificity CalculatorCalculate and compare CSS selector specificity