CSS Border Style Generator
Per-side or shorthand CSS border with width, style and color.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this css border style generator
- Leave "Edit all sides at once" ticked for the standard `border` shorthand, or untick it to control each side independently.
- Set Width (px), Style (solid, dashed, dotted, double, groove, ridge, inset, outset, none), and Color.
- Pick a backdrop color and a box fill color so you can judge contrast against light and dark surfaces.
- Watch the live preview update; the box-color/backdrop colors are preview-only and do not appear in the CSS.
- Press Generate CSS, then Copy CSS to grab the declaration.
About this css border style generator
The border style generator outputs either the `border` shorthand (when all sides match) or four `border-top/right/bottom/left` declarations (when sides differ). It supports the full set of CSS `border-style` values, including the less-used 3D variants `groove`, `ridge`, `inset`, and `outset` — useful when you want a deliberately retro look. The live preview shows the actual border on a real box so you can see exactly how the chosen style and width render, which is especially important for `dashed` and `dotted` where the actual pattern depends heavily on width.
Worked example: keep "edit all sides" on with Width=2, Style=dashed, Color=#6366f1. The output is `border: 2px dashed #6366f1;`. Now untick edit-all-sides and set just the bottom border to Width=4, Style=solid, Color=#10b981, leaving the others at width 0. The tool emits a four-line declaration: ``` border-top: 0px solid #6366f1; border-right: 0px solid #6366f1; border-bottom: 4px solid #10b981; border-left: 0px solid #6366f1; ``` The preview shows the underline-bottom-border-only pattern — common for tab-bar indicators.
FAQ
- What is the order of the `border` shorthand?
- CSS accepts the three sub-values in any order: width, style, and color. The generator emits them in the conventional `width style color` order, e.g. `border: 2px solid #6366f1;`.
- Why does my dashed border look different at small widths?
- CSS does not standardize the dash length — each browser picks its own pattern based on the border width. At 1–2 px the dashes can look almost solid; bump to 3–4 px to see clear gaps. For tightly controlled patterns, use a background-image with linear-gradient.
- What do `groove`, `ridge`, `inset`, `outset` actually do?
- They render the border as a faux-3D bevel using two derived colors from the base color. They look retro (think Windows 95) and are rarely used in modern UI, but are still in the CSS spec.
- How do I make an outline that does not affect layout?
- Use the CSS `outline` property instead of `border`. Outlines are painted outside the element’s box without taking layout space, which is why focus rings use them. This tool generates `border`, which does consume box size; if that matters, switch to `outline` in your editor.
- Can I generate per-side different styles?
- Yes — untick "Edit all sides at once" and the tool emits four `border-<side>` declarations, one per side. Each side can have its own width, style, and color.