CSS Outline & Border Generator
About this generator
Three modes in one tool — Border (per-side controls, 8 styles, alpha-aware color), Outline (layout-neutral, with outline-offset), Gradient border (linear-gradient via background-clip mask, no SVG required). Side-by-side comparison shows border vs outline so you can see WHY one or the other is right for your case.
6 curated presets cover the convergent cases — Soft border, Brand outline, Dashed dropzone, Bottom underline only, Focus outline, Gradient border. 5 framework exports (CSS, SCSS, Tailwind, styled-components, React, Vue).
Permalink: every adjustment encodes into the URL. No login, no watermark, no paywall. Free and MIT-licensed.
Why use this Border Generator?
How to use this generator
Border & outline reference
| Property | Typical value | What it does |
|---|---|---|
| border | 2px solid #7c6cff | Affects layout (pushes content via box-sizing). Respects border-radius. Renders inside the element box. |
| outline | 2px solid #7c6cff | Does NOT affect layout (sits outside box). Supports outline-offset to push it further out. Used for focus rings. |
| outline-offset | 4px | Distance between the element and its outline. Negative values pull the outline inward (overlap the element). |
| border-radius | 12px | Rounds the corners. Outlines respect it in modern browsers (Safari 16+, Chrome 94+). |
| border-{side} | 2px solid … | Per-side control. Use border-bottom for underlined links, border-left for blockquote bars, etc. |
| border-image | linear-gradient(...) 1 | Lets you put any image (including gradients) as a border. The legacy way to do gradient borders — bg-clip is more flexible. |
| border-style | solid · dashed · dotted · double · groove · ridge · inset · outset | Eight built-in patterns. Solid is universal; dashed reads as "drop zone"; double draws two parallel lines. |
Common border patterns
.link {
color: #7c6cff;
text-decoration: none;
border-bottom: 2px solid currentColor;
transition: border-color 0.2s;
}
.link:hover { border-color: transparent; }.dropzone {
border: 2px dashed rgba(124, 108, 255, 0.4);
border-radius: 14px;
padding: 28px;
text-align: center;
transition: border-color 0.2s, background 0.2s;
}
.dropzone:hover, .dropzone.is-dragover {
border-color: #7c6cff;
background: rgba(124, 108, 255, 0.06);
}.gradient-card {
position: relative;
border: 2px solid transparent;
border-radius: 12px;
padding: 22px;
background:
linear-gradient(#1a1a24, #1a1a24) padding-box,
linear-gradient(135deg, #7c6cff, #ec4899) border-box;
background-clip: padding-box, border-box;
}.button:focus-visible {
outline: 2px solid #7c6cff;
outline-offset: 3px;
border-radius: 8px;
}Pro tips
Frequently asked questions
What's the actual difference between border and outline?
Three things. (1) Layout — border occupies space inside the element's box; outline does NOT — it's painted outside the box without shifting surrounding content. (2) Radius — border respects border-radius (curves around rounded corners); outline historically did NOT but as of 2022+ outline DOES follow border-radius in Chrome 94+, Firefox 88+, Safari 16.4+. (3) Offset — outline supports outline-offset (positive = gap, negative = inset); border has no equivalent. Use border for visual structure that affects layout. Use outline for focus rings, debug overlays, and any indicator that should NOT shift content.
How does the gradient-border trick work?
CSS doesn't ship a native gradient-border property. The workaround uses linear-gradient as the BACKGROUND in border-box clipping mode, with a transparent border on top, and a second layer of solid background in padding-box clipping mode to mask the inner area. The generator emits the full recipe — copy-paste ready. Modern alternative: border-image with a linear-gradient source — works but has more quirks (doesn't combine with border-radius cleanly). The mask-based recipe in this generator's gradient mode is the most production-tested pattern.
Why per-side borders?
Two common cases: (1) bottom-only underline borders for nav links and form labels — Material Design's text input is just border-bottom: 1px solid. (2) Asymmetric card decorations — a thick left border that signals 'callout' (used by Linear, Stripe docs, GitHub issue threads). Per-side mode in this generator emits border-top / border-right / border-bottom / border-left separately so only the sides you set get rendered.
Should I use outline or box-shadow for focus rings?
outline is the right answer for accessibility focus rings — it doesn't affect layout (vs box-shadow which can affect layout via element re-flow in some edge cases), it has the dedicated outline-offset property for the gap between the element and the ring, and it's the property modern accessibility tools (axe-core, Lighthouse) check for keyboard focus. WCAG 2.2 1.4.11 (Non-text Contrast) requires focus indicators have ≥3:1 contrast against adjacent colors. Use outline: 2px solid + outline-offset: 2px and you've satisfied the requirement.
Does the dashed/dotted pattern look the same in all browsers?
Mostly. The actual dash + gap lengths are browser-defined and can vary slightly — Chrome / Edge use one pattern, Safari uses a slightly different one, Firefox uses a third. For pixel-perfect cross-browser dashes, use border-image with a custom SVG instead. For 95% of UI, the native dashed style is fine — designers rarely notice the difference between Chrome and Safari dash patterns.
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.
See it used in real designs
Browse hand-coded collections that put this tool to work.
