CSS Generator
CSS Border and Radius Generator
Round all corners together or edit each one. Try elliptical radii for organic shapes and compare borders with outlines. The CSS updates as you adjust the controls.
Generated CSS
Have your shape? Create its background with the gradient generator or return to the index of CSS generators.
Shape corners without shifting the layout
Use one radius for every corner or edit corners independently. Elliptical radii have horizontal and vertical values separated by a slash. Percentages are relative to the box dimensions. The organic-shape button offers asymmetric combinations you can refine.
Should I use border or outline for focus?
A border participates in the box model; an outline does not take up layout space. Keep a visible keyboard focus indicator and use outline-offset to separate it from the edge. Never remove focus styling without an effective replacement.