Free · Fast · Privacy-first

CSS Double Border Generator

CSS offers three distinct techniques for creating double borders, each with different trade-offs for spacing control, compatibility, and interaction with layout.

⚡

Preview border-style: double with adjustable width

🔒

Outline plus border combination for two distinct rings

✨

Box-shadow technique for fully controllable extra border layers

⚡

Generates CSS for all three techniques side by side

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Border Builder to your website

Drop the Border Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/border-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Border Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Three Techniques for CSS Double Borders and When to Use Each

Border-style: double is the most direct approach but the least flexible. The total border-width is divided into three equal parts: the first third is the inner line, the middle third is the gap, and the final third is the outer line. At 3px total width, each section is exactly 1px. At 6px, each section is 2px. You cannot control the gap size or make the two lines different colors with this property alone. Border-style: double is best for decorative frames, table borders in formal documents, and print stylesheets where a traditional double-line appearance is appropriate and the automatic proportioning is acceptable.

Combining outline and border gives you two independently controllable rings. The border forms the inner ring and outline forms the outer ring. Because outline is drawn outside the border box, the gap between the two rings is determined by outline-offset. Setting outline-offset: 0 places the outline directly against the border; positive values add a gap. Each ring can have a different color, width, and style. This technique is clean and uses no additional DOM elements, but outline does not affect layout and may overlap surrounding elements if the gap is large. Also, outline does not always follow border-radius in older browsers.

Box-shadow can simulate multiple border layers by stacking shadows with zero blur and no offset. Setting box-shadow: 0 0 0 2px #6366f1, 0 0 0 4px #fff, 0 0 0 6px #6366f1 creates three concentric rings. The first shadow creates the inner ring at 2px, the second creates a 2px white gap, and the third adds an outer ring at 6px from the element edge. Box-shadow always follows border-radius and does not affect layout. You can add as many layers as needed. The main limitation is that box-shadow is applied to the outer edge of the element, so the first layer adds spacing at the border outside, which may interact with adjacent elements' padding areas.

The choice between double border-style, outline-plus-border, and stacked box-shadow becomes clearer when you consider how each renders the inset and outset 3D effects that browsers tried to standardise long ago. Inset and outset borders calculate their dark and light sides from the border-color value, but the exact gradient stops are left to the implementation. Chrome, Firefox, and Safari each produce slightly different lightness offsets, so the bevel effect that looked acceptable in one browser can look muddy or stark in another. The double border-style sidesteps this because it uses a flat colour for both lines and lets the browser do nothing more than divide the width into three equal sections. For consistent multi-ring effects across browsers, stacked box-shadow with explicit colour values produces identical results everywhere because every parameter (offset, blur, spread, colour) is fully specified rather than computed. When pixel-perfect consistency matters, prefer box-shadow stacking over inset, outset, ridge, or groove.

MDN: border-style MDN: box-shadow

How to use this tool

💡

Start with border-style: double at 6px to see the two-line effect. Switch to the outline combination mode to add an independent outer ring. Use the box-shadow mode for full control over spacing and color between border layers.

How It Works

Step-by-step guide to css double border generator:

1
Choose a double border technique
Select from border-style: double, outline-plus-border, or box-shadow layers. Each appears in the preview simultaneously so you can compare the visual results before choosing.
2
Set border-width for double style
For border-style: double, set width to 6px or higher to see two clearly visible lines with a gap. At 3px, the lines are 1px each, which is minimal but visible.
3
Adjust spacing for outline or box-shadow techniques
For outline, use outline-offset to control the gap. For box-shadow, adjust the spread values of each layer to control inner and outer ring distances.
4
Copy the CSS
Copy the generated CSS for your chosen technique. The tool provides all required declarations including outline-offset for the outline approach and the full box-shadow stack for the layered approach.

Real-world examples

Common situations where this approach makes a real difference:

Selected item ring indicator in a photo gallery

A selected image in a gallery needs a visible selection ring without affecting grid layout. Using box-shadow: 0 0 0 3px white, 0 0 0 5px #6366f1 adds a white inner gap and a blue outer ring. Both follow the image's border-radius and sit outside the layout box. The white gap creates clear separation between the image edge and the selection color, which is a common pattern in file pickers and image selectors.

Decorative double border on a section heading

A section heading or pull quote uses border: 4px double #6366f1 for a formal two-line decorative border. At 4px, the double style shows two 1.3px lines with a 1.3px gap. Combined with padding and a slightly colored background, this creates a formal document aesthetic appropriate for academic or legal document interfaces.

Focus ring layered on top of an existing button border

A button with border: 1px solid #d1d5db needs a focus ring that does not modify its existing border. Adding outline: 2px solid #6366f1 with outline-offset: 2px on :focus-visible places the focus ring outside the existing border with a 2px gap. The button's border and the focus ring are completely independent, so neither state change affects the other.

Multi-ring badge on a notification icon

A notification badge on an icon button uses multiple box-shadow rings to create a pulsing effect. The static state has box-shadow: 0 0 0 2px white, 0 0 0 4px #ef4444, giving a white gap and a red outer ring. A CSS animation scales the outer shadow ring outward for the pulse effect. This builds on top of the icon's normal box model without additional elements.

Pro tips

Get better results with these expert suggestions:

Box-shadow layers do not affect layout

Unlike border, box-shadow layers do not expand the element's layout dimensions. Multiple stacked box-shadow rings extend into the margin area visually but do not push adjacent elements. This is the main advantage over adding actual borders: you can add decorative rings without adjusting padding, margin, or element dimensions elsewhere in your layout.

Combine border and inset box-shadow for inner and outer rings

Setting box-shadow: inset 0 0 0 2px #6366f1, 0 0 0 2px #6366f1 creates one ring inside the element (inset) and one ring outside. Adding border: 2px solid white between them creates a three-ring effect: inner ring, white border gap, outer ring. This is a controlled way to build multi-ring indicators for selected states.

Use outline for focus rings on top of a normal border

Elements with their own border can use outline as a second ring for the :focus-visible state without removing or modifying the existing border. The outline appears outside the border automatically. Set outline-offset to control the gap. This avoids any changes to the element's border properties on focus, which could cause layout shifts.

Border-style: double works well in print stylesheets

Print stylesheets often use border-style: double for table borders, blockquote containers, and formal document elements. The browser's automatic proportioning of the two lines and gap is sufficient for print contexts where pixel-perfect control is less critical than semantic simplicity and minimal CSS overhead.

Use box-shadow layers for unlimited border rings

Box-shadow accepts a comma-separated list of shadows. Stack multiple 0 0 0 Npx values at increasing spread values to create concentric rings: 0 0 0 2px #color1, 0 0 0 4px white, 0 0 0 6px #color2. Each layer adds another ring at a specified distance from the element edge.

Border-style: double needs at least 3px to show

At 1px or 2px, the double border style renders as solid because there is not enough space to show both lines and the gap. Set border-width to 3px minimum to see the double effect. At 6px you get a clearly visible two-line appearance with a 2px gap.

Outline-offset: 0 places outline flush against border

When combining outline and border for a double border effect, setting outline-offset: 0 removes the gap between border and outline. Both rings sit adjacent, creating a two-line effect similar to border-style: double but with independent color and width control.

FAQ

Frequently asked questions

Border-style: double divides the total border-width into three equal sections: the outer line, the gap, and the inner line. Each section is one-third of the total width. At 3px total, you get 1px outer line, 1px gap, and 1px inner line. At 6px, each is 2px. The two lines share the same border-color; you cannot set different colors for each line using this property alone. The browser handles the proportioning automatically. For very thin widths below 3px, double renders the same as solid because the space is insufficient for three distinct sections.

Border-style: double does not support different colors for each line. To achieve two independently colored borders, use one of two approaches. First, combine border and outline: border: 2px solid #6366f1 for the inner ring and outline: 2px solid #f59e0b for the outer ring, with outline-offset: 0 to place them adjacent. Second, use box-shadow layers: box-shadow: 0 0 0 2px #6366f1, 0 0 0 4px #f59e0b creates two concentric rings of different colors at 2px and 4px from the element edge.

No. Box-shadow does not affect the element's layout dimensions regardless of the spread values. A box-shadow with a large spread extends visually into the margin area but does not push adjacent elements or change the element's measured width and height. This is the main practical advantage of using box-shadow for decorative border layers: you can add rings around an element without adjusting surrounding layout values. The shadow can be obscured by adjacent elements if they are positioned closer than the shadow spread.

The minimum is 3px. At 1px and 2px, there is not enough space to show both lines and a gap between them, so the browser renders double the same as solid. At exactly 3px, each section is 1px, which is the minimum visible line thickness. On high-DPI retina displays, 1px lines are rendered with sub-pixel precision and may appear thinner or with anti-aliasing. For a clearly visible double border with distinct lines and gap, use 6px or higher.

Set both border and outline on the same element. Border forms the inner ring and outline forms the outer ring. Set outline-offset: 0 to place the outline directly against the border for a tight double-line appearance, or add a positive offset for a gap. Example: border: 2px solid #6366f1; outline: 2px solid #6366f1; outline-offset: 2px creates a 2px border, a 2px gap, and a 2px outer ring. Each can have independent color, width, and style values.

Yes. Box-shadow always follows the element's border-radius in all modern browsers. Stacked box-shadow rings on a rounded element produce concentric rounded rings, not rectangular ones. This is a key advantage over the outline-plus-border technique for rounded elements, since outline did not follow border-radius in older browsers. For modern browser targets, both techniques work, but box-shadow has been following border-radius longer and more consistently.

Yes. Box-shadow is animatable. Adding transition: box-shadow 0.3s ease and changing the shadow values on :hover or via a class toggle creates animated ring effects. For a pulsing effect, use a CSS @keyframes animation that scales the box-shadow spread outward: @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); } 100% { box-shadow: 0 0 0 10px rgba(99,102,241,0); } }. This creates an expanding ring that fades out, commonly used for notification badges.

Use border-style: double for simple decorative frames where automatic proportioning is acceptable and you do not need different colors per line. It requires no additional properties beyond the standard border shorthand. Use the box-shadow technique when you need independent control over ring spacing, colors, or the number of rings. Box-shadow also works correctly with border-radius and does not affect layout. Use the outline-plus-border combination specifically when you want to add a second ring to an element that already has a border without modifying the border declaration.

The CSS specification defines inset and outset as 3D bevel effects but leaves the exact lightness calculations to each browser engine. Chrome, Firefox, and Safari each generate their own dark and light tones from the border-color value using slightly different algorithms, so the resulting bevel looks subtly different in each browser. The differences are most visible at mid-range colours where the lightness offset matters most; pure white or pure black borders look more consistent because there is less room for engines to disagree. For pixel-perfect multi-line effects, stacked box-shadow is the reliable choice because every colour value is explicit and renders identically in every browser. Inset and outset are fine for casual decorative use where minor cross-browser variation is acceptable, but they are not the right tool when the design specifies exact colours and lightness for each line.

Double border-style is included in the element's border-width measurement, so it interacts with box-sizing the same way solid borders do. Under content-box, a 200px element with border: 6px double adds 12px (6px on each side) to the outer dimension, making the visible element 212px. Under border-box, the same declaration keeps the outer dimension at 200px but subtracts 12px from the content area, leaving 188px for the inside. Most modern resets apply box-sizing: border-box universally, which is the predictable default for double borders because the outer dimension stays whatever you declared. Box-shadow and outline approaches sidestep the question entirely because neither participates in layout: ring rings drawn that way do not change the element's measured size regardless of which box-sizing model applies.