CSS Border & Outline Generator
Borders, outlines and border-image
Borders, outlines and border-image look similar but behave quite differently: a border takes up layout space, an outline does not, and border-image replaces the border's paint with a gradient or image. CSSGen.dev's generator covers all three, including the offset outline that modern focus rings rely on.
Syntax
border: <width> <style> <color>; outline: <width> <style> <color>; outline-offset: <length>;| Part | What it controls |
|---|---|
| border | Width, style and colour in one shorthand. The style is required — a border with no style is invisible however wide it is. |
| border affects layout | It sits inside the element's box and adds to its size unless box-sizing: border-box is set. |
| outline | Drawn outside the border, takes no layout space and never shifts neighbouring content. This is why it suits focus states. |
| outline-offset | Pushes the outline away from the edge, which is what gives a modern focus ring its breathing room. Negative values pull it inward. |
| border-image | Replaces the border's paint with an image or gradient. It needs border-image-slice, and the element still needs a border-width to paint into. |
| border-radius interaction | An outline follows the element's border-radius in current browsers, but border-image does not — a gradient frame on a rounded box will have square corners. |
Notes from practice
Never remove the focus outline without replacing it
outline: none with nothing in its place makes a site unusable by keyboard. Use :focus-visible and a clear ring with outline-offset instead.
Gradient borders have a rounding problem
border-image ignores border-radius. For a rounded gradient frame, use a padding-box/border-box background pair or two stacked backgrounds, which the generator writes for you.
Borders change size unless box-sizing is set
With the default content-box, adding a 2px border makes the element 4px wider. box-sizing: border-box, which most resets apply, keeps the declared width intact.
CSS Border & Outline Generator FAQ
What is the difference between border and outline in CSS?
A border is part of the element's box: it takes up space and can shift the layout. An outline is drawn outside the border, occupies no space, and never moves neighbouring content. That is why outlines are the right choice for focus indicators.
How do I create a gradient border in CSS?
Either use border-image: linear-gradient(...) 1, which is short but ignores border-radius, or stack two backgrounds — a solid one clipped to padding-box and the gradient clipped to border-box — which keeps rounded corners intact.
How do I style a focus ring properly?
Use :focus-visible so the ring appears for keyboard users without flashing on every mouse click, and give it outline-offset for separation: :focus-visible { outline: 2px solid currentColor; outline-offset: 3px }. Never set outline: none without providing a replacement.
Why does adding a border change my element's size?
With the default box-sizing: content-box, borders and padding are added on top of the declared width. Setting box-sizing: border-box makes the width include them, so the element stays the size you asked for.
Can border-image follow border-radius?
No. border-image paints a square frame and ignores border-radius entirely. For a rounded gradient frame use the two-background technique with background-clip, or an inset box-shadow in place of a border.
Related generators
- Border Radius — Round each corner on its own, or switch to elliptical radii for organic blob shapes.
- Form Controls & Scrollbars — accent-color, caret-color, color-scheme, ::selection, ::placeholder, scrollbar styling and textarea behaviour.
- Box Shadow — Stack up to three shadow layers, mix inset and outer shadows, and tune colour and opacity.
- Gradients — Linear, radial and conic gradients, repeating patterns and modern colour-space interpolation.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.