Border Radius Generator
Control each corner independently with a live preview. Switch between px and % units. Copy the CSS instantly.
Quick Shapes
Corner Radii
↖ TL
12px
↗ TR
12px
↙ BL
12px
↘ BR
12px
Generated CSS
border-radius: 12px;
CSS Border Radius: Syntax, Units & Shape Techniques
1. border-radius Syntax and Shorthand Order
The border-radius shorthand accepts one to four values applied in clockwise order starting from the top-left corner: top-left top-right bottom-right bottom-left. A single value applies uniformly to all four corners; two values set the top-left/bottom-right pair and the top-right/bottom-left pair; four values set each corner independently. This tool always outputs the fully explicit four-value form when corners differ, and the shorter single-value form when all corners match, to keep the generated CSS as compact as possible.
2. How to Use This Generator
Start from a Quick Shape preset (Sharp, Slight, Rounded, Pill, Circle, Squircle, Leaf, Tab) or drag the four corner sliders directly. Toggle “Linked” off to adjust each corner independently — useful for asymmetric shapes like a chat-bubble tail or a tab. Switch between px (fixed pixel size) and % (relative to the element's own dimensions) with the unit toggle. The live preview box and the generated CSS both update instantly; click “Copy CSS” to grab the shorthand, or scroll to the Longhand Properties panel (shown automatically when corners differ) for the four individual border-*-radius declarations.
3. Choosing Between px and % Units
Use px when you want a fixed, predictable corner curve regardless of the element's size — good for buttons, cards, and inputs where a consistent 8px or 12px radius is part of your design system. Use % when the radius should scale with the element itself — most commonly border-radius: 50% on a square element to produce a perfect circle (avatars, icon badges), since a percentage value scales correctly even if the element's size changes responsively, while a fixed pixel value would not.
4. Common Shape Recipes
A Pill shape (fully rounded ends, like a toggle switch or a rounded button) uses a radius value larger than half the element's shortest side — this tool's Pill preset uses 9999px, which safely exceeds any realistic element size and lets the browser's corner-overlap clamping do the rest. A Circle needs border-radius: 50% on an element with equal width and height. A Leaf or teardrop shape sets two opposite corners to 0 and the other two to 50%, which is what the Leaf preset does. A Tab shape (rounded top, square bottom) sets only the two top corners, useful for browser-tab-style UI elements.
5. Common Mistakes
A frequent mistake is applying border-radius to a parent element while forgetting that a child element (like an <img> filling the container) will overflow the rounded corners unless the parent also has overflow: hidden. Another is using a percentage radius on a non-square element expecting a circle — you'll get an ellipse instead, since the horizontal and vertical radii are each computed as a percentage of that axis's own dimension. Finally, remember that border-radius rounds the border box, not necessarily the content box — with a thick border, the visible curve is measured from the outer edge.
6. Limitations
This tool covers standard border-radius shapes (uniform and per-corner) but does not generate the elliptical / syntax (separate horizontal/vertical radii per corner) or complex organic shapes — those require clip-path or SVG, which are outside this generator's scope. A true mathematical “squircle” (superellipse) also differs subtly from the large-percentage-radius approximation used in the Squircle preset here; for a pixel-perfect superellipse curve, a dedicated clip-path: path() or SVG approach is more accurate.
Frequently Asked Questions
What is CSS border-radius?
border-radius rounds the corners of an element's border box. You can apply the same radius to all four corners (shorthand) or set each corner individually using border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
What does 50% border-radius do?
Setting border-radius: 50% on an element with equal width and height produces a perfect circle. On a non-square element, it produces an ellipse.
Can I use different units for border-radius?
Yes. border-radius accepts px (fixed pixel size), % (percentage of the element's width/height), em and rem (relative to font size), and vw/vh (relative to viewport). Percentage values are the most flexible for responsive designs.
What is the / syntax in border-radius?
The / separates horizontal and vertical radii for each corner independently. For example, border-radius: 40px 20px / 20px 40px creates elliptical corners where the horizontal and vertical curves differ.
Does border-radius work in all browsers?
Yes. border-radius has been fully supported without vendor prefixes in every major browser (Chrome, Firefox, Safari, Edge) since around 2012. There is no compatibility reason to avoid it in a modern project.
Why does a large border-radius sometimes look clipped or square on one side?
If the sum of two adjacent corner radii exceeds the length of the shared edge, browsers automatically scale down all radii proportionally so they fit without overlapping — per the CSS spec's corner-overlap rule. This mostly shows up on narrow elements with large radius values; reducing the radius or widening the element resolves it.
Can I animate border-radius with CSS transitions?
Yes, `border-radius` is animatable with `transition` or `@keyframes` — browsers interpolate the value smoothly between states. This is commonly used for hover effects like a card corner rounding on hover, or a button morphing from a rounded rectangle to a pill shape.