Free · Fast · Privacy-first

CSS Card Border Design Generator

Card components are the most common repeated UI pattern in web interfaces, and the visual weight of their border determines whether the card feels lightweight and modern or heavy and dated.

⚡

Adjust border, border-radius, and box-shadow together in one preview

🔒

Compare flat border, shadow-only, and hybrid card styles

✨

Preview subtle and prominent border variants side by side

⚡

Generates complete card border CSS declarations

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.

Card Border Strategy: Flat, Elevated, and Hybrid Approaches

Flat bordered cards use a visible border without a box-shadow. A typical flat card has border: 1px solid #e5e7eb with border-radius: 8px. The border defines the card boundary clearly and works well on white or very light gray backgrounds where shadow would be barely visible anyway. Flat cards are lighter in rendering cost and create a clean, structured appearance common in data tables, settings panels, and list views. The main risk is that a very light border color like #f3f4f6 can disappear on slightly off-white page backgrounds, so the border color should be tested against the actual page background color, not just the preview white.

Shadow-only cards use box-shadow without any border. A common value is box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06), which creates a close small shadow and a slightly larger ambient shadow at lower opacity. Shadow-only cards feel more elevated and three-dimensional than flat bordered cards. They work best on light gray page backgrounds where the shadow is visible. On white or very dark backgrounds, shadows lose contrast and the card boundary becomes hard to see. Adding a very subtle 1px border at rgba(0,0,0,0.05) to shadow cards helps define edges on white backgrounds.

Hybrid cards combine a light border with a shadow. The pattern border: 1px solid #e5e7eb with box-shadow: 0 2px 8px rgba(0,0,0,0.08) and border-radius: 8px is used in many modern design systems including Stripe, Linear, and Notion. The border defines the sharp edge precisely while the shadow adds depth and lift. On hover, a common interaction is to increase the shadow: box-shadow: 0 4px 16px rgba(0,0,0,0.12). This creates clear hover feedback without changing the border or border-radius, so the layout remains stable. The hybrid approach tolerates more background variety than shadow-only because the border anchors the card edge even when shadow contrast is low.

Cards are where the layered relationship between border, border-radius, and box-shadow becomes most visible, and the layering needs deliberate thought about which property carries which job. Border-radius applies to every paint layer at once, so a single radius value rounds the border, the background, and the box-shadow simultaneously without extra configuration. This is normally what you want: a rounded card with a rounded shadow looks correct. The trap appears when an interactive card animates its shape on hover. Animating border-radius itself can cause visible corner clipping artifacts during the transition because the browser has to recompute the rounded mask on every frame. The safer pattern is to keep border-radius constant and animate box-shadow spread or offset instead. The shape stays stable; the elevation suggestion changes. For cards that also use a thin border, leave the border constant during hover too (only its color may change) so the visible card outline never jitters during the interaction.

MDN: box-shadow MDN: border-radius

How to use this tool

💡

Start with border: 1px solid #e5e7eb and border-radius: 8px for a flat card. Add a subtle shadow of 0 1px 3px rgba(0,0,0,0.1) for the hybrid style. Increase border-radius to 12px for a modern open layout aesthetic. Compare the result against a shadow-only card with no border.

How It Works

Step-by-step guide to css card border design generator:

1
Set border width and color
Start with border: 1px solid #e5e7eb for a flat card baseline. Adjust color to match your design token palette. Use a lighter value for secondary cards and a slightly darker value for featured cards.
2
Set border-radius
Choose a border-radius that matches your design system scale: 8px for standard cards, 12px for open layouts, 4px for compact data cards. Use one radius value consistently across all card variants.
3
Add box-shadow if using elevated style
Add one or two box-shadow layers. Start with box-shadow: 0 1px 3px rgba(0,0,0,0.1) for a subtle lift. Preview on your actual page background color to verify the shadow is visible.
4
Copy the CSS
Copy the generated card border CSS. Apply it to your card component and test with realistic content, multiple cards in a grid, and on different background colors.

Real-world examples

Common situations where this approach makes a real difference:

Dashboard data card with flat border

A dashboard metrics card uses border: 1px solid #e5e7eb with border-radius: 6px and no shadow. The flat border creates a clean, structured appearance appropriate for data-dense interfaces where multiple cards sit in a tight grid. The solid border defines each card clearly without the visual noise of competing shadows across a dense layout.

Marketing feature card with hybrid border and shadow

A landing page feature card uses border: 1px solid #e5e7eb with border-radius: 12px and box-shadow: 0 2px 8px rgba(0,0,0,0.08). The generous radius and subtle shadow create a modern, approachable appearance. On hover, the shadow increases to 0 8px 24px rgba(0,0,0,0.12) with a transition to signal interactivity. The border stays constant to prevent layout shifts.

Selectable card in a plan picker

Plan selection cards use border: 2px solid #e5e7eb in their default state and border: 2px solid #6366f1 with background: #f0f4ff in their selected state. The transparent default pre-allocates the 2px border, so the selected state border appears without shifting the card. Adding border-radius: 8px and a consistent card width keeps the picker grid stable during selection changes.

Elevated card with shadow-only boundary

An app launcher panel uses shadow-only cards: no border, border-radius: 12px, and box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08). The two-layer shadow creates visible elevation on a light gray background. On click, the shadow compresses to 0 1px 4px rgba(0,0,0,0.1) to simulate the card being pressed, giving tactile feedback through shadow animation.

Pro tips

Get better results with these expert suggestions:

Use two box-shadow layers for more natural card elevation

Real objects cast two shadows: a close, dense shadow directly below and a wider, softer ambient shadow further away. Two box-shadow values replicate this: box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06). The first layer is close and slightly opaque; the second is wider and less opaque. Together they produce a more convincing elevation than a single shadow at a higher opacity.

Reduce border opacity for elevated shadow cards

Cards that already have a prominent shadow do not need a high-contrast border. Setting border: 1px solid rgba(0,0,0,0.06) instead of a solid gray border lets the shadow do the visual work of defining the card boundary while the border only anchors the edge on high-contrast backgrounds. This produces a lighter, more refined card appearance.

Use selected state borders for interactive card grids

Cards in a selectable grid can use border to signal selection state. Default: border: 2px solid transparent. Selected: border: 2px solid #6366f1. The transparent default pre-allocates border space so the selected state does not shift the card or grid layout. Add background: #f0f4ff to the selected state for additional visual confirmation.

Dark mode cards typically need lighter borders and darker shadows

On dark backgrounds, light borders and dark shadows have reversed contrast. Dark mode cards benefit from border: 1px solid rgba(255,255,255,0.1) for a subtle white-tinted edge and box-shadow: 0 2px 8px rgba(0,0,0,0.4) for a deeper shadow that reads against the dark page. Test both modes at each radius and shadow combination to confirm the card is readable in both contexts.

Test card borders on your actual background color

A #e5e7eb border on a white background is clearly visible, but the same border on a #f9fafb background nearly disappears. Always preview your card border against the actual page background color. Increase border contrast slightly if the card sits on a non-white surface.

Increase shadow on card hover without changing border

Card hover interactions should not resize the card. Change only box-shadow intensity on :hover while keeping border and border-radius identical. Using transition: box-shadow 0.2s ease makes the hover shadow change smooth. This creates a clear elevation response to hover without any layout disruption.

Use border-radius consistently across card variants

A card grid with different border-radius values across card types looks inconsistent. Define one or two radius values for all card components and apply them as CSS variables. Mixing 8px and 12px cards in the same grid creates a visually noisy layout.

FAQ

Frequently asked questions

Both work, and the best choice depends on context. A visible border gives a sharp, precise boundary that is always clear regardless of background color. Box-shadow creates an elevated, three-dimensional appearance that depends on background contrast to be visible. Shadow-only cards can disappear on white or very dark backgrounds. For maximum versatility, combine a very light border like border: 1px solid rgba(0,0,0,0.06) with a moderate shadow. This hybrid approach adapts to various backgrounds while providing visual depth.

Most design systems use 8px as the default card radius. It is neutral, modern, and works across a wide range of card sizes. For compact data cards in dashboards, 4px to 6px looks tighter and more serious. For marketing and consumer-facing cards with more whitespace, 12px to 16px creates a friendlier, more open appearance. Avoid using different radius values for different card types within the same view, as this creates visual inconsistency. Define one or two radius values for cards in your design system and apply them consistently.

Elevation in CSS uses box-shadow to simulate light casting a shadow below an object. A low elevation card uses a small close shadow: box-shadow: 0 1px 3px rgba(0,0,0,0.1). A medium elevation uses a larger shadow: box-shadow: 0 4px 12px rgba(0,0,0,0.1). For the most natural result, use two box-shadow layers: one close and slightly opaque, one wider and less opaque. Avoid large blur values with bright colors because they produce unrealistic neon glow shadows rather than natural elevation shadows.

Add transition: box-shadow 0.2s ease to the card default state, then increase box-shadow on :hover. Example: .card { box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: box-shadow 0.2s ease; } .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }. The transition animates the shadow smoothly between the resting and hover values. Keep border and border-radius unchanged on hover to avoid any layout shifts during the interaction.

Yes, and it is recommended for any component library. Define at :root: --card-border: 1px solid #e5e7eb; --card-radius: 8px; --card-shadow: 0 1px 3px rgba(0,0,0,0.1). Reference these on the card selector: border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow). For dark mode, redefine these variables inside @media (prefers-color-scheme: dark) or a .dark class without changing the card CSS itself. This pattern separates design tokens from component logic.

The transparent border pre-allocation technique prevents layout shifts on selection. Set border: 2px solid transparent on all cards in the default state. On the selected state, change border-color to the selection color: border-color: #6366f1. Because the 2px border space was already allocated, the visible border appears without resizing the card or shifting the grid. Add background-color to the selected state for additional visual weight beyond just the border change.

On a pure white background, shadows need moderate opacity to be visible: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08) works well. The first value creates a close, slightly opaque shadow that anchors the card edge. The second creates a wider ambient shadow. For hover states on white backgrounds, increase to box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1). Avoid values above rgba(0,0,0,0.25) on white; at higher opacities the shadow looks too heavy for modern card designs.

By default in content-box model, border is outside the padding and content area, making the card larger than its declared width. Switching to box-sizing: border-box includes the border in the declared dimensions, keeping card width predictable. Most modern CSS resets apply box-sizing: border-box globally. If your cards are inside a CSS grid with fixed column widths, border-box sizing is essential to prevent cards from overflowing their grid columns due to border addition or producing uneven gaps along the row.

Border-radius applies automatically to every paint layer including box-shadow, so a rounded card produces a rounded shadow without any extra configuration. The typical elevated card recipe is a thin border, a moderate border-radius, and a two-layer shadow with offsets that suggest both close contact and ambient lift: border: 1px solid #e5e7eb, border-radius: 12px, box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06). The two shadow layers compose more naturally than a single shadow at higher opacity because real objects cast both a tight contact shadow and a wider ambient shadow. For hover elevation, animate the shadow rather than the radius itself: increase shadow spread and y-offset on hover while leaving border-radius constant. Animating radius can cause visible corner clipping artifacts during the transition because the browser recomputes the rounded mask every frame, which looks jittery.

Almost never. Border-radius covers every standard card shape including rounded rectangles, asymmetric corner combinations, and pill-style cards. It applies cleanly to border, background, and box-shadow at once, preserves the visible focus indicator drawn by outline, and integrates with all standard interaction patterns. Clip-path produces non-rectangular shapes (hexagons, parallelograms, speech bubbles) that border-radius cannot reach, but the cost is severe for cards: clipped elements lose box-shadow (it gets clipped too, usually meaning no shadow at all), they lose the standard outline-based focus ring, and they make the rounded-image-inside-card pattern much harder because the inner image cannot be clipped to a clip-path without duplicating the path. For any card that needs elevation, accessibility, or contained imagery, border-radius is the right choice. Reserve clip-path for decorative non-card shapes where you can accept losing shadows and focus indicators.