Custom CSS border generator
Adjust the width, style, color and rounding of a CSS border — uniformly or per side — with a live preview, then copy the ready-to-use code. 100% local processing — nothing is sent to a server.
How it works
A CSS border combines three pieces of information: a width, a line style and a color, optionally rounded with border-radius. This tool lets you set these values uniformly on all four sides or independently per side, with an immediate visual result to validate the effect before copying the code.
What's the difference between "groove", "ridge", "inset" and "outset"?
These four styles simulate a 3D relief effect based on the chosen color: "groove" gives the impression of a carved groove, "ridge" of a raised ridge, "inset" of a sunken frame and "outset" of a protruding frame; the exact rendering depends on the browser and the background color used.
Why separate widths per side instead of using the "border" shorthand?
The border shorthand doesn't allow setting a different width per side; for an asymmetric effect (thick border on top, thin on the sides), you need to use the detailed properties border-top-width, border-right-width, etc., as this tool does when the "same width" option is disabled.
No data is transmitted to a server: the preview and code are generated directly in your browser.