CSS Border Radius Generator
What border-radius does
The border-radius property rounds an element's corners, and accepts a separate horizontal and vertical radius for each one. CSSGen.dev's border radius generator exposes all eight values, so you can go from an evenly rounded card to an organic blob shape without leaving the browser.
Syntax
border-radius: <top-left> <top-right> <bottom-right> <bottom-left> / <vertical radii>;| Part | What it controls |
|---|---|
| one value | Rounds all four corners equally — border-radius: 12px. |
| four values | Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. |
| the slash | Everything before the slash sets horizontal radii, everything after sets vertical ones. This is what turns circular corners into elliptical ones. |
| percentages | Relative to the element's own width and height, so 50% on every corner makes a circle or ellipse that stays correct at any size. |
| overlap | If the radii on one edge add up to more than its length, the browser scales all of them down proportionally rather than overlapping. |
Notes from practice
Elliptical radii make blobs, not just rounder corners
The slash syntax is the difference between a rounded rectangle and an organic shape. Eight different values produce the soft, asymmetric blobs used behind hero images and avatars.
Percentages beat pixels for circles
border-radius: 50% stays a perfect circle whatever the element's size; a pixel radius has to be recalculated every time the box changes.
Nested radii need different values
A rounded element inside another should use the outer radius minus the padding, or the inner corner looks tighter than the outer one. Matching both to the same number is the usual giveaway of an unconsidered layout.
CSS Border Radius Generator FAQ
How do I round only some corners in CSS?
Pass four values, which run clockwise from the top left: border-radius: 12px 12px 0 0 rounds only the top two corners. You can also set a single corner with its own property, such as border-top-left-radius.
How do I make a circle with CSS?
Set border-radius: 50% on an element with equal width and height. If the element is not square the same value produces an ellipse, which is often what you want for an avatar frame that adapts to its content.
What does the slash do in border-radius?
It separates horizontal from vertical radii. border-radius: 60px 40px / 30px 70px gives each corner an elliptical curve rather than a circular one, which is how organic blob shapes are made.
Why is my border-radius being ignored or clipped?
Usually because a child element is painting over the corner. Add overflow: hidden to the rounded parent, or give the child border-radius: inherit so it follows the same curve.
Can border-radius use percentages?
Yes, and they resolve against the element's own width for horizontal radii and its height for vertical ones. That makes percentage radii responsive in a way pixel values are not.
Related generators
- Box Shadow — Stack up to three shadow layers, mix inset and outer shadows, and tune colour and opacity.
- Clip Path — Cut an element into polygons, circles, ellipses or rounded insets.
- Border, Outline & Border-image — Border styles, gradient frames through border-image, and an outline with offset for focus rings.
- Aspect Ratio & Object Fit — Hold a box to a ratio, then choose how the image fills it. The dashed frame marks the original edges.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.