CSS Rounded Corners Generator
Design rounded corners visually with independent control over each corner. Preview the result live and copy clean CSS border-radius code — all processed client-side in your browser.
CSS Border Radius Generator
Design CSS border-radius visually. Adjust each corner independently or link them, choose units, and copy the CSS.
Preview Settings
CSS Output
border-radius: 12px;
Presets
About CSS Border Radius
The border-radius property rounds the corners of an element. You can set a single value for all corners or specify each corner individually.
Shorthand: border-radius: top-left top-right bottom-right bottom-left — values go clockwise from the top-left corner.
Units: Use px for fixed rounding, % for proportional rounding (50% on a square creates a circle), em/rem for scalable rounding relative to font size.
Pill shape: Set a very large pixel value (e.g. 9999px) on a rectangular element to create a fully rounded pill shape. This works because the radius is clamped to half the element's dimension.
Elliptical corners: CSS also supports separate horizontal and vertical radii using the border-radius: h-radius / v-radius syntax for asymmetric curves, though this generator focuses on circular (uniform) corners.
What is CSS border-radius for rounded corners?
The CSS border-radius property rounds the corners of an element's border box. You can set a uniform radius for all corners or control each corner independently using border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. The shorthand supports up to four values for asymmetric rounding and even elliptical corners using the slash syntax.
Common use cases
Rounded corners are used on virtually every modern website for cards, buttons, input fields, modals, tooltips, images, and containers. Subtle rounding (4-8px) gives UI elements a polished, friendly appearance. Larger radius values create pill-shaped buttons and tags. Asymmetric rounding can create unique shapes like notched cards or speech bubble tails.
Frequently Asked Questions
How do I round only specific corners in CSS?
Use the individual corner properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Or use the shorthand with four values: border-radius: 10px 0 0 10px rounds only the left corners.
What are elliptical border-radius values?
The slash syntax (e.g., border-radius: 50px / 25px) creates elliptical corners where the horizontal and vertical radii differ. This produces organic, egg-like shapes useful for creative design elements and blob shapes.