Compose CSS borders per side — width, all eight border styles, color and radius — with live preview and honest notes on which styles still earn their place in modern UI.
Settings
Generated locally in your browser — your settings and results never leave this page.
Borders as UI, not decoration
Modern interfaces use borders surgically: a bottom border marks the active tab, a left border accents a quote or alert, a dashed border invites a file drop. This generator builds exactly those — pick sides, width, any of the eight styles, color and radius, preview live, copy the per-side declarations.
Worked example
/* active tab */
.tab-active {
border-bottom: 3px solid #4f46e5;
}
/* quote accent */
blockquote {
border-left: 4px solid #22c55e;
}The eight styles, honestly ranked
- solid — 95% of modern UI. dashed/dotted — dropzones, placeholders, “cut here” affordances.
- double — needs 3px+ to render both lines; occasionally right for certificates and formal panels.
- groove/ridge/inset/outset — 3D styles whose two tones derive from your color, vary by browser, and read as legacy; the tool warns when you pick them.
Border vs its alternatives
- Borders occupy layout space; outline does not (reserve it for focus rings); box-shadow rings (0 0 0 3px) sit outside without shifting layout — the mechanism behind Tailwind’s ring utilities.
Related
- Corner shaping continues in the Border Radius Generator.
How to use the CSS Border Generator
- Pick which sides get the border, plus width, style and color.
- Add corner radius for the preview.
- Copy the per-side declarations.
Frequently asked questions
What are all the border styles?
solid, dashed, dotted, double, groove, ridge, inset, outset — all previewable here. In modern flat UI, solid does 95% of the work, dashed marks dropzones and placeholders; the 3D styles read as legacy.
Why single-side borders?
They are UI workhorses: bottom border for active tabs and underlined inputs, left border for quotes and alert accents — cheaper and cleaner than extra elements.
Border or outline or box-shadow ring?
Borders take layout space; outlines do not (use them for focus); box-shadow rings (0 0 0 3px) stack outside without layout shift — the technique behind Tailwind's ring utilities.
Style a card component
The border, radius, shadow and background for a component, as CSS you can paste.
- CSS Border Generator you are hereSet the border.
- CSS Border Radius GeneratorRound the corners, including uneven radii.
- CSS Box Shadow GeneratorAdd elevation with a shadow.
- CSS Gradient GeneratorFill the background with a gradient if you want one.
