How to use it
The four values go: top-left, top-right, bottom-right, bottom-left.
border-radius: 40px 8px 40px 8px;Blob mode uses eight percentages — four horizontal, a slash, then four vertical — for organic shapes.
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;Use 50% on a square for a circle, or a large value like 999px for a pill.
Worked example
A pill button: border-radius: 999px. A round avatar: border-radius: 50%.
Frequently asked questions
Why isn’t my image a circle?
The element must be square (width = height) with 50%.
px or %?
px is fixed; % is relative to the element’s size.
Can corners differ horizontally and vertically?
Yes — use blob mode with the slash syntax.