Double border

Quick implementation

/* Technique 1: border-style: double
   Draws a double line as a single border property.
   Simplest approach — the total border-width is split across
   two lines with a gap in between. */
.db-double-style {
  border: 6px double oklch(0.72 0.19 265);
}

/* Technique 2: outline + outline-offset
   Adds a second ring outside the element's border box.
   Does NOT respect border-radius — always draws as a rectangle
   in most browsers. Useful when a sharp outer ring is acceptable. */
.db-outline {
  border: 2px solid oklch(0.72 0.19 265);
  outline: 2px solid oklch(0.72 0.19 265);
  outline-offset: 4px;
}

/* Technique 3: box-shadow layers
   Stacks multiple box-shadow values to simulate concentric rings.
   Fully respects border-radius. No markup changes needed.
   Use spread-radius only (no blur) for crisp lines. */
.db-box-shadow {
  box-shadow:
    0 0 0 2px oklch(0.19 0.02 260),  /* gap (background color) */
    0 0 0 4px oklch(0.72 0.19 265),  /* outer ring */
    0 0 0 6px oklch(0.19 0.02 260),  /* second gap */
    0 0 0 8px oklch(0.52 0.22 265);  /* outermost ring */
}

Prompt this to your LLM

Includes role, technique choice, constraints, framework variants, and edge cases to handle.

You are a senior frontend engineer implementing double border effects
for UI cards and containers — no JavaScript required.

Goal: Apply a visible double border (two concentric rings with a gap
between them) to a card element using pure CSS.

Choose one technique based on the context:

A) border-style: double — simplest; splits a single border-width into
   two lines. Use when the element has no border-radius, or when the
   double effect only needs to match the element's own shape.

B) outline + outline-offset — adds a second ring outside the border box.
   Fast to write, but outline does not respect border-radius in most
   browsers, so the outer ring stays rectangular. Use for sharp-cornered
   elements or focus-ring–style emphasis.

C) box-shadow layers — stacks spread-only box-shadow values (no blur)
   to simulate rings. Fully respects border-radius. Can combine with
   elevation shadows. Use when rounded corners must carry through all rings.

Technical constraints:
- Use oklch() for all color values — no hex or rgba.
- Use CSS custom properties (var(--card), var(--bg), etc.) for
  background and text colors.
- For box-shadow technique: alternate the gap color with the page
  background color to create the visual separation between rings.
- For outline technique: set outline-offset to at least 3px so the
  two lines are visibly distinct.

Framework variant (pick one):
A) Vanilla CSS utility class applicable to any element.
B) React component that accepts color (oklch string) and technique
   ("double" | "outline" | "shadow") props and applies the correct
   CSS via inline styles or a class.

Edge cases to handle:
- box-shadow rings add to the element's visual footprint but do NOT
  affect layout — reserve margin or padding around the element equal
  to the total shadow spread so rings are not clipped by overflow.
- When combining box-shadow double borders with elevation shadows,
  list the elevation shadow last so it renders beneath the rings.
- outline rings may be clipped by overflow: hidden on a parent — use
  overflow: clip or add padding to the parent instead.

Return CSS only (or a React component if variant B is chosen).

Why double borders matter

A double border gives a UI element immediate visual hierarchy without reaching for drop shadows or background fills. It signals selection states, card focus, featured content, or decorative emphasis in a way that a single border cannot — two rings create a sense of depth and intention. The pattern appears in design systems as "highlighted" or "featured" card variants and in form controls for active or selected states.

There is no single CSS property that does everything needed here, so the choice of technique depends on the element's shape, the required browser support, and what else the element is already doing with box-shadow or outline.

Choosing the right technique

border-style: double is the simplest option by far — the browser renders two lines by dividing the declared border-width into three equal thirds: outer line, gap, inner line. A border: 6px double produces two 2px lines with a 2px gap. The limitation is control: the ratio between line width and gap is fixed at 1:1:1, and the technique respects border-radius naturally. When simplicity and rounded corners are both needed, this is the first choice.

outline with outline-offset places a second ring entirely outside the element's border box. It does not affect layout — the outline occupies no space. The critical trade-off is that outline historically has not respected border-radius in most browsers, though support has improved in recent years. In practice, on elements with large border-radius values, test across browsers before relying on this technique. It works best on sharp-cornered elements and for focus-ring–style treatments where the outer ring deliberately contrasts with the element's own shape.

box-shadow layering is the most flexible technique. By stacking multiple box-shadow values with no blur and increasing spread radii, you build concentric rings that always follow the element's border-radius. The gap between rings is achieved by sandwiching a shadow colored with the page background between two accent-colored shadows. The key caveat: box-shadow rings do not affect layout, so if a parent has overflow: hidden, the outer rings can be clipped. Add margin to the element equal to the outermost spread to give rings room to breathe.

Pseudo-elements provide maximum control — you can set different radii for each ring, use gradients, animate individual rings, and compose complex multi-layer effects. The trade-off is markup coupling: ::before and ::after are consumed, which conflicts with other pseudo-element uses on the same element. Reserve this technique for decorative effects where the element has no other pseudo-element needs.

Accessibility notes

Double borders used as selection or focus indicators must meet WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast), which requires a contrast ratio of at least 3:1 between the indicator color and the adjacent background. Using oklch(0.72 0.19 265) on a dark background of oklch(0.13 0.02 260) comfortably exceeds this threshold.

Do not rely solely on a double border to convey state — combine it with another indicator such as a text label or icon change. For interactive elements, the outline technique is well-suited as a focus ring because browsers already manage outline for keyboard focus; layering your design on top with outline-offset integrates naturally with the browser's focus model without suppressing it.