Overview
Set a border width (in pixels), a style from the full standard set (solid, dashed, dotted, double, groove, ridge, inset, outset, or none), and a color via picker or HEX, and get the matching border shorthand declaration with a live preview box. A uniform corner-radius field covers the common case of a simple rounded border, and a separate "Link all corners" toggle switches to independent top-left, top-right, bottom-right, and bottom-left radius fields when you need an asymmetric shape - the output automatically switches between a single border-radius value and the four-value form depending on which mode is active. Width is validated as a number in a sensible range and an invalid value is flagged rather than silently clamped. Runs entirely client-side.
Best for: Previewing a border style, width, and color combination before pasting the CSS into a stylesheet
How to use this tool
- Set width, style, and color. Pick from the full standard border-style keyword set and a color via picker or HEX.
- Optionally round the corners. Add a single uniform corner radius if needed.
- Copy the CSS. Grab the finished border shorthand declaration, ready to paste.
Why use this tool
Live preview box
See the exact border rendered before committing it to a stylesheet.
Full style keyword set
All nine standard border-style values are available, not just solid and dashed.
Clear width validation
An invalid or out-of-range width is flagged explicitly rather than silently clamped.
Frequently asked questions
Yes - turn off "Link all corners" in the per-corner radius panel to set the top-left, top-right, bottom-right, and bottom-left radius independently. Leave corners linked for the simpler uniform case, which keeps using the single "Corner radius" field.
Width must be a plain non-negative number up to 50 pixels - anything non-numeric, negative, or outside that range is flagged with a specific message instead of being silently clamped into range.