CSS Border Generator
Preview border width, style, radius, and color, then copy the CSS.
Live preview
Width: 2px
Radius: 12px
CSS output
border: 2px solid #6366F1;
border-radius: 12px;
Why use a border generator?
Width, style, radius, and color are easier to judge on a live box than in a raw rule. Copy border and border-radius together, then adapt logical properties if your codebase prefers them. One radius only — four-corner organic shapes are a hand edit. Switch radius to percent when the curve should scale with the box; 50% is an ellipse (a circle on a square). Outline and border-image are out of scope.
Popular borders
Your data stays private
Border CSS is generated in this browser. Nothing is uploaded or stored on a server.
About previewing CSS borders
CSS Border Generator previews width, style, radius, and color, then copies border and border-radius CSS. It is a local playground for buttons and cards. It does not emit outline, does not do image borders, and does not write logical properties (border-inline) unless you adapt the snippet.
Radius is a single value in this panel, not per-corner four-value syntax — extend by hand for organic shapes. Use pixels for a fixed corner, or percent so the curve scales with the box (50% fills an ellipse). Style includes the usual CSS keywords the preview can show. Pair with Shadow Generator for elevation and Color Picker for the stroke color.
Related: Gradient Generator, CSS Formatter, Color Converter.
The URL is /tools/css-border-generator. We do not generate border-image slices or clip-path. Dotted and dashed styles follow the browser preview, which can differ slightly from a print RIP. Close the tab to discard the draft. Copy both border and radius if your component needs both.
Design tokens in a design system still belong in your repo. This page is a preview, not a token pipeline, not Figma, and not a linter. Paste the snippet into a class and adapt logical properties if you must.
How to generate a border
Set width, style, and radius
Tune width and style, then set radius in pixels or percent. The live preview updates as you change each control.
Pick a color
Copy border and border-radius together or separately as needed.
Paste into a stylesheet
Adapt to logical properties if your codebase prefers them.
Stay local
Nothing is uploaded. Shadow Generator adds elevation next to the stroke.
Related tools
Color Picker
Pick a color and copy HEX, RGB, and HSL values in this browser.
Image Color Picker
Open an image, hover to magnify pixels, and copy HEX, RGB, and HSL. Nothing is uploaded.
Gradient Generator
Build a CSS linear-gradient with two stops and a live preview. Copy the CSS locally.
CSS Shadow Generator
Tune box-shadow offset, blur, spread, and color, then copy the CSS.
Color Converter
Convert colors between HEX, RGB, and HSL. Type or paste below — all three formats update as you type.
CSS Border Generator FAQ
The panel uses one radius, in pixels or percent. Percent is relative to the box, so 50% is an ellipse (a circle on a square). Extend to four-value border-radius by hand for organic shapes. Outline and border-image are not emitted.
It copies physical border and border-radius. Adapt to border-inline if your codebase prefers logical CSS.
No. Preview and CSS stay in the browser.
The preview follows the browser. A print RIP can look different. Copy border and border-radius together if the component needs both. We do not emit border-image or clip-path. Close the tab to discard the draft. Shadow Generator adds elevation next to the stroke. Nothing is uploaded.