border-radius
Rounds the corners of a box. Each corner can have its own horizontal and vertical radius.
7,272 effects in the catalog use this property.
Syntax
border-radius: <top-left> <top-right> <bottom-right> <bottom-left> / <vertical-radii>;Watch out
Values before the slash set horizontal radii and values after it set vertical radii. Organic blob shapes come directly from varying those two axes.
Common values
999px- Pill shape; any value above half the height produces the same result
50%- A perfect circle on a square element
60% 40% 30% 70% / 60% 30% 70% 40%- Organic blob shape
Effects using border-radius
These are working effects from the catalog. Open a tile to inspect the full source.